PrimeFaces gmap not rendering

Question

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

score 28 · Answer 1 · answered Jan 08 '12 at 01:36

28

You need to add this script to you page:

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

answered Jan 08 '12 at 01:36

David Barros

281
3
3

Just as a note. The sensor parameter is not required anymore. see: http://stackoverflow.com/questions/8616764/what-is-the-sensor-parameter-in-google-places-api-good-for – Koekiebox Jan 15 '16 at 19:42

Mark · Accepted Answer · 2011-01-21T21:05:22.807

5

<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.

edited Jan 21 '11 at 21:05

answered Jan 21 '11 at 20:49

Mark

16,772
9
42
55

score 2 · Answer 3 · answered May 28 '13 at 08:02

2

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>

answered May 28 '13 at 08:02

hemantgp

352
3
7

Adding script tag on firefox 33 is enough for me. Thanks! – Rafael Ruiz Tabares Nov 10 '14 at 15:48

score 0 · Answer 4 · answered Nov 25 '17 at 20:52

0

In recent times, you are supposed to provide a KEY https://stackoverflow.com/a/38248059/651288

otherwise you get a Google Maps API error: MissingKeyMapError

You can get a key here https://developers.google.com/maps/documentation/javascript/get-api-key

answered Nov 25 '17 at 20:52

Pierluigi Vernetto

1,954
1
25
27

score 0 · Answer 5 · answered Aug 26 '11 at 13:40

0

Try this:

<h:form>
 <p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID"    
 style="width:600px;height:400px" streetView="true"/>
</h:form>

answered Aug 26 '11 at 13:40

Yay4Maps

9
1

PrimeFaces gmap not rendering

5 Answers5