1

I am using PrimeFaces GMap to display a map.

I have tried the simplest possible solution.

I have taken the key from Google and written code like this:

<h:head>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASp910hdK6GE2OeqQCEmmsL5bE2srrviI" type="text/javascript"></script>
        <title>Admin</title>
    </h:head>
    <h:body>
        <div>
            <p:gmap center="41.381542, 2.122893" zoom="15" type="HYBRID" style="width:100%;height:400px" />
        </div>
......

I have tried with multiples keys.

I have tried with async, defer, ?sensor=false, etc.

Nothing seems to work; the map just won't show.

How can I solve this problem?

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
DCalic
  • 25
  • 8

1 Answers1

2

The problem is happening because you did not include the Google Map script in your <head> tag. PrimeFaces showcase should warn users about this...

Include this following script in your <head> tag:

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

IMPORTANT: If you are using localhost, the map will still not work. You must either use an IP (can be 127.0.0.1, for example) or host your application in any cloud.

IMPORTANT²: Since 2016 Google Maps also require an API key to work properly, you can read more about it here.

Bonifacio
  • 1,482
  • 10
  • 19
  • I have included it, along with the key as you can see in my code. Still won't work tho. – DCalic Aug 21 '17 at 12:11
  • Try removing any additional code in your page then. I just ran a new application with PrimeFaces 6.0 with only the gmap component and everything worked fine. Probably there are more code in your application that may be causiing this problem. – Bonifacio Aug 21 '17 at 12:18
  • U were right, i just made a new empty xhtml page with only the map component and it worked. You have any idea on how to pinpoint whats been blocking it on the other page? Thanks tho! – DCalic Aug 21 '17 at 12:21
  • My guess is that you have one or more components with a broken JavaScript code. To pinpoint this just open your browser's developer console and look for JavaScript errors logged there. – Bonifacio Aug 21 '17 at 12:27