Menu
I have seen that many users have asked this question, but in fact there is still no answers with examples of how to use Google Maps without a key (all the answers are references to another webpages).
I have managed to use Google Maps without the key, but I only managed to get a static map. Do you have any idea how do this dynamic?
var img = new Image();
img.src = "http://maps.googleapis.com/maps/api/staticmap?center=-32.0000343,-58.0000343&zoom=5&size=300x300&sensor=true&visualRefresh=true";
return img; //OR document.body.appendChild(img);
Even if you simply click this link you can see the map, and if you change the "url properties" you can "edit" the map: http://maps.googleapis.com/maps/api/staticmap?center=-32.0000343,-58.0000343&zoom=5&size=300x300&sensor=true&visualRefresh=true
When I say "dynamic map" I mean to somethins like this: https://google-developers.appspot.com/maps/documentation/javascript/v2/examples/map-simple
828
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.
A Google Maps API key is a personal code provided by Google to access Google Maps on this site. Your API key provides you with a free quota of Google Map queries. Your Google account will be automatically billed for any usage that exceeds your quota.
This has worked for me. I tried it on localhost. Various other solutions in stackoverflow didn't helped.
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=<?php echo urlencode($address); ?>&output=embed"></iframe><br />
In this way we can generate maps dynamically based upon the address we entered in the back end.
51
As @geocodezip said, You're looking for Google Maps Javascript v3.
Here is simple example of using it(picked from my old answer), this doesn't need any keys.
HTML:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id="map-canvas"></div>
CSS:
#map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
Javascript:
function initialize() {
var myLatlng = new google.maps.LatLng(43.565529, -80.197645);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//=====Initialise Default Marker
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'marker'
//=====You can even customize the icons here
});
//=====Initialise InfoWindow
var infowindow = new google.maps.InfoWindow({
content: "<B>Skyway Dr</B>"
});
//=====Eventlistener for InfoWindow
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I have created a simple fiddle for your reference.
Hope you got some idea.
Since you're not interested in using keys, Beware of the limits.
Google Maps Javascript API : up to 25,000 map loads per day for each service.
This includes:
From your comments,
I too tried using canvas, it was not working.
var mapCanvas = document.createElement("canvas");
But this is working good with div element.
var mapCanvas = document.createElement("div");
mapCanvas.style.width = "200px";
mapCanvas.style.height = "200px";
Updated JSFiddle
Don't forget to set width and height properties.
36
I am putting an example on plunker
http://plnkr.co/T4eULTnKbWCKlABPI4pu
and the code
<!DOCTYPE html>
<html>
<body>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=London&ie=UTF8&&output=embed"></iframe><br />
</body>
</html>
Use the Google Maps Javascript API v3 (lots of good examples in the documentation)
23
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
