PrimeFaces gmap not rendering

23,741

Solution 1

<f:view contentType="text/html"> is needed for it to work in Safari/Chrome

My other problem was HYBRID was spelled wrong, the following works:

<h1>Google Map 1</h1>
<p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID"
  style="width:600px;height:400px" />

Spelling was never my strong suit.

Solution 2

You need to add this script to you page:

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>

Solution 3

This works for me

<h:head>
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</h:head>
<h:body>
    <f:view contentType="text/html">
        <h1>Google Map</h1>
        <p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:600px;height:400px" />
    </f:view>
</h:body>

23,741

Mark

Updated on November 26, 2020

Comments

Mark over 3 years

Using PrimeFaces 2.2.RC2 in a JSF 2.0 project.

I'm trying to get a basic Google Map to render with the gmap component. No errors show up just blank page where the map should be.

My .xhtml file

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <h:head>
        <script src="http://maps.google.com/maps/api/js?sensor=false" 
              type="text/javascript"></script>
    </h:head>
    <h:body>
        <f:view contentType="text/html">
            <h1>Google Map</h1>
            <p:gmap center="41.381542, 2.122893" zoom="15" type="HYBIRD"
                    style="width:600px;height:400px" />
        </f:view>
    </h:body>
</html>

Not had any issues getting other PrimeFaces components to render in this project and the example on the PrimeFaces website renders in my browser just fine.

Any ideas ?

Update:

I changed the view tag to <f:view contentType="text/html">, now I get a grey box where the map should be and when I hover over the box the curser turns to white hand to grab and move the map around, but still no map shows.

alt text

Rafael Ruiz Tabares over 9 years

Adding script tag on firefox 33 is enough for me. Thanks!
Koekiebox over 8 years

Just as a note. The sensor parameter is not required anymore. see: stackoverflow.com/questions/8616764/…