Problem in loading google maps js prevents gmap from showing

ykoto · 22 Aug 2014, 00:24

I am using PF5 and jsf2.2 . I am trying to load a gmap component. After several hours of searching I found that the problem is caused by the fact that google maps javascript in the following script

Code: Select all

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

is attempting to load asynchronously another script. The error results in this

Code: Select all

TypeError: 'undefined' is not a function (evaluating 'document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>')') (01:18:51:477 | error, javascript)
  at http://maps.google.com/maps/api/js?sensor=false:9

and can't find a proper workaround for this.
Here is a simple test page

Code: Select all

<?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:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
<head>          
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head>
<h:body>aae
<p:gmap center="31.521118, 74.349375" zoom="15" type="terrain" style="width:600px;height:400px" />
</h:body>
</html>

I know the error has to do with the google's script but I have not found any example on how I could use the gmap component bypassing this issue

kukeltje · 22 Aug 2014, 08:54

PF already contains the google maps js, so no need to include it

ykoto · 22 Aug 2014, 09:24

The gmap component doesn't show up anyway. That was my first try and after not working I tried adding the js. Thank you

ykoto · 22 Aug 2014, 09:27

So this should normally work

Code: Select all

<?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:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>              
</h:head>
<h:body>
<p:gmap center="31.521118, 74.349375" zoom="15" type="terrain" style="width:600px;height:400px" />
</h:body>
</html>

I don't know if there is any problem with the setup-libraries in my project but didn't have problem with other component till now.

kukeltje · 22 Aug 2014, 11:04

Hmm... maybe the gmap does not load generic primefaces js etc... Can you check what happens if you put a (hidden) p:inputText on the page?

ykoto · 23 Aug 2014, 09:43

A p:inputText shows up as expected. what do you mean when you say 'hidden', what should I try?

ykoto · 05 Sep 2014, 10:38

The rendered component looks like this

Code: Select all

<div id="dets:j_idt11:j_idt41" style="width:10px;height:20px"></div><script id="dets:j_idt11:j_idt41_s" type="text/javascript">$(function() {PrimeFaces.cw('GMap','widget_dets_j_idt11_j_idt41',{id:'dets:j_idt11:j_idt41',mapTypeId:google.maps.MapTypeId.HYBRID,center:new google.maps.LatLng(41.381542,2.122893),zoom:15,fitBounds:false});});</script></div></div><input type="hidden" id="dets:j_idt11_activeIndex" name="dets:j_idt11_activeIndex" value="0" autocomplete="off" /></div><script id="dets:j_idt11_s" type="text/javascript">PrimeFaces.cw("TabView","widget_dets_j_idt11",{id:"dets:j_idt11",widgetVar:"widget_dets_j_idt11",effectDuration:"normal",scrollable:false});</script><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="5996915515391794199:2485287142700311425" autocomplete="off" />

smithh032772 · 05 Sep 2014, 19:00

kukeltje wrote:Hmm... maybe the gmap does not load generic primefaces js etc...

i agree. OP needs to check which resources (primefaces .js files) are loaded in the browser from the server.

ykoto · 05 Sep 2014, 19:24

As far as I know the primefaces.js file is included in the primefaces.jar. How can I make a check of what is loaded? the only error I get back is

Code: Select all

TypeError: 'undefined' is not a function (evaluating 'bI.ready.promise()')

at the .. faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=5.0:25 file. I don't think it has to do with the map issue

smithh032772 · 05 Sep 2014, 19:32

others have reported that this issue is not in PrimeFaces 4.0, but it is now an issue with PrimeFaces 5.0.

so, run your code/app with PrimeFAces 4.0, see if the gmap renders in browser, check the primefaces *.js files that are loaded in the browser via your browser console, and take a note of all the primefaces *.js files that are loaded in the browser when gmap is rendered.

next/finally, do the same with PrimeFaces 5.0 and your code/app, and compare the primefaces *.js files that are loaded in the browser, for the xhtml page that contains p:gmap.

i do NOT use p:gmap in my app. i rather use Google Maps Javascript API and render maps that way. that's my preference (and my recommendation).

Problem in loading google maps js prevents gmap from showing

Who is online