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>
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.
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.
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).
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With