PrimeFaces gmap not rendering

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.

Answers


You need to add this script to you page:

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

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


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>

Try this:

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

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


Need Your Help

Run code before and after each test in py.test?

python pytest

I want to run additional setup and teardown checks before and after each test in my test suite. I've looked at fixtures but not sure on whether they are the correct approach. I need to run the setu...

Convert JSON query parameters to objects with JAX-RS

java json java-ee jax-rs

I have a JAX-RS resource, which gets its paramaters as a JSON string like this: