You must be a member of Google APIs Console and obtain a valid API to embed Google Maps into your website or web application. That’s a well known fact.
Actually, it is a one-liner. I split it into several lines and variables only for clarity of reading it.
First, get the image URL:
var mapUrl = '', mapZoom = 17, mapLatitude = 78.0399665, mapLongitude = 27.1750151, mapWidth = 730, mapHeight = 730, mapOptions = '&maptype=roadmap&markers=color:green%7C'; /** * Mini-map update * * Debug (Taj Mahal): 27.1750151, 78.0399665 * https://maps.google.pl/maps?q=27.1750151,78.0399665&z=17 */ mapUrl = "http://maps.googleapis.com/maps/api/staticmap?center=" + mapLatitude + "," + mapLongitude + "&zoom=" + mapZoom + "&size=" + mapWidth + "x" + mapHeight + mapOptions + mapLatitude + "," + mapLongitude + "&sensor=false";
The above code will generate a string (in
mapUrl variable) like that:
img HTML element:
And… enjoy! :>
A rather simple tweak up
If you’re using jQuery, Zepeto or something similar, you can change these two lines:
var ... mapWidth = 730, mapHeight = 730, ...
Into something like this:
var ... mapWidth = parseInt($('#map').css("width"), 10), mapHeight = parseInt($('#map').css("height"), 10), ...
To make sure that your map-like image will be matching your
<img /> element’s dimensions.
January 2022 Update
I have accidentally came across this post and wanted to check, how things are going seven and a half year later. As we can expect, this is not working any longer. Right know, even for such a simply request, you are enforced to provide your own Google API key.