javascript - Google Maps v3 api for localhost not working

Question

Welcome To Ask or Share your Answers For Others

javascript - Google Maps v3 api for localhost not working

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Google Maps v3 api for localhost not working

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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T02:47:48+0000

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.

Categories

javascript - Google Maps v3 api for localhost not working

javascript - Google Maps v3 api for localhost not working

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags