CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
user1824542
user1824542

Reputation: 225

Google Map API - Hello Word - error

Why 'hello word' example from https://developers.google.com/maps/documentation/javascript/tutorial makes this error?

error message

Here is my code :

  <!DOCTYPE html> <html>   <head>
        <style type="text/css">
          html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
        </style>
        <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
        </script>
        <script type="text/javascript">
          function initialize() {
            var mapOptions = {
              center: { lat: -34.397, lng: 150.644},
              zoom: 8
            };
            var map = new 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>

Upvotes: 0

Views: 352

Answers (1)

dvhh
dvhh

Reputation: 4750

Apparently your HTML file is on your local filesystem which explains the error.

For security purpose, to avoid mixing element served on http and https by googleMap API, the javascript of the API is referencing external element starting with a double slash (ie : //) which would use the same protocol as the current HTML file.

As you are testing form the local filesystem, your url starts with file:// and in consequence // would refer to file://

  • In your case the javascript is make a request to //maps.gstatic.com/mapfiles/closedhand_8_8.cur which would translate to file://maps.gstatic.com/mapfiles/closedhand_8_8.cur

  • on a normal http server it would translate to http://maps.gstatic.com/mapfiles/closedhand_8_8.cur

  • on a https server would translate to https://maps.gstatic.com/mapfiles/closedhand_8_8.cur

Upvotes: 1

Related Questions