43

I wanted to try out a sample demo of implementing Gmaps v3 and tried out this example from Google's documentation, but there is no output , the page just loads for a few seconds and then blank, no output.

<!DOCTYPE html>
<html lang = "en">
<head>
    <style type="text/css">
        html{height: 100%}
        body{height: 100%; margin: 0; padding: 0}
        #map-canvas{height: 100%}
    </style>
    <title>GMaps Demo</title>
    <script src = "https://maps.googleapis.com/maps/api/js?
                   key=${API_KEY}&sensor=false">
    </script>
    <script>
        function initialize(){
            var mapOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = google.maps.Map(
                      document.getElementById("map-canvas"),
                      mapOptions);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
        </script>
</head>
<body>
    <div id = "map-canvas">
    </div>
</body>
</html>
icedwater
  • 4,701
  • 3
  • 35
  • 50
skywalker2909
  • 1,636
  • 2
  • 31
  • 46
  • Possible duplicate of [How to set Google API key restriction - HTTP referrers](https://stackoverflow.com/questions/41993276/how-to-set-google-api-key-restriction-http-referrers) – viktorianer Jan 26 '18 at 14:39

3 Answers3

81

First of all: Google Maps 3 does not need an api key anymore, so you are fine with

https://maps.googleapis.com/maps/api/js?sensor=false

as an URL.

(As Jeff Hoye pointed out, as of June 22, 2016, an API Key is required again.)

And then you forgot the "new" in this line:

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

With those changes your map will be displayed.

Joachim Rohde
  • 5,915
  • 2
  • 29
  • 46
  • 1
    Thanks a lot for correcting me on missing the 'new' keyword and informing about the api key. Much appreciated !! – skywalker2909 Nov 05 '13 at 10:13
  • 5
    There is also a good explanation of the API Key [here](http://stackoverflow.com/a/8785844/2327005) – pascal Nov 05 '13 at 11:42
  • 3
    The google maps javascript API v3 no longer requires the `sensor` parameter either. – geocodezip Dec 20 '15 at 02:50
  • 5
    FYI, as of June 22, 2016, they do again require an API Key: http://googlegeodevelopers.blogspot.com.au/2016/06/building-for-scale-updates-to-google.html – Jeff Hoye Jun 23 '16 at 15:24
7

Without an API Key now Google Maps does not work... reference: https://console.cloud.google.com/apis

Danny Mahoney
  • 1,255
  • 2
  • 13
  • 24
Ravi Ji
  • 128
  • 1
  • 10
0

it's very easy! in the new API code, you should enter your referrers. So for your localhost test:

LEAVE IT EMPTY

here is also the google api explanation:

 Accept requests from these HTTP referrers (web sites) (Optional)
 Use asterisks for wildcards.

If you leave this blank, requests will be accepted from any referrer.
Be sure to add referrers before using this key in production.

Ebrahim
  • 1,740
  • 2
  • 25
  • 31
  • 1
    Leaving it empty exposes your apps to cease being able to use maps if others abuse your key on their own site. – Frédéric Aug 10 '16 at 12:36
  • 2
    @Ebrahim ...and when you're out of pre-launch testing and still want an API that works in prod and _still do active development_, what do you suggest? – dudewad Nov 18 '16 at 06:57
  • @dudewad otherwise you should specify your host by valid IP address or DNS, as far as I know – Ebrahim Nov 26 '16 at 19:59
  • @dudewad I'm sure it's working, I have tested it, I can give you screenshots or videoshot! – Ebrahim Nov 30 '16 at 14:35
  • Can you just tell me what you entered to get both localhost and your prod environments working? The entire point of this post is that nobody seems to be able to figure out how to get localhost to work without whitelisting every single domain on the internet. – dudewad Nov 30 '16 at 17:35
  • @dudewad just I used * – Ebrahim Dec 01 '16 at 16:28
  • 1
    Okay this is _exactly_ what we said we don't want so never mind. – dudewad Dec 01 '16 at 16:44
  • If you have any alternative let me know please @dudewad – Ebrahim Dec 01 '16 at 16:55
  • lol no, I don't thats the whole point of asking! Though if I do find one I'll post it. – dudewad Dec 01 '16 at 20:08