Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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> 
like image 871
skywalker2909 Avatar asked Nov 05 '13 08:11

skywalker2909


People also ask

Why is Google Maps API not working?

There are a several reasons why your google maps may not be working, the most common issue being no Google Map API key set or set incorrectly. To use the Google Maps JavaScript API, you must register your app project on the Google Cloud Platform Console and get a Google API key which you can add to your app.

Can I use Google Maps API without API key?

In order to embed a Google Map iframe without api key add a Google Map widget from the left side panel. Then open it and add the address. This way you can embed Google Map without api key via Elementor.

Is Google Maps API no longer free?

You won't be charged until your usage exceeds $200 in a month. Note that the Maps Embed API, Maps SDK for Android, and Maps SDK for iOS currently have no usage limits and are at no charge (usage of the API or SDKs is not applied against your $200 monthly credit).


1 Answers

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.

like image 165
Joachim Rohde Avatar answered Oct 10 '22 06:10

Joachim Rohde