p:gmap won't show

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?

Solution

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.