The simplest, static map from Google with no API key required

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.

Not everyone knows that this is required only, if you want to embed a fully-featured Google Maps, i.e. with ability to scroll, zoom, use markers, calculate routes etc. For embedding a static image of Google Maps showing requested location you don’t need API and required Javascript code is nearly a one-liner.

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 = parseInt($('#map').css("width"), 10),
    mapHeight = parseInt($('#map').css("height"), 10),
    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";

Then set it (by any mean — Javascript, jQuery, Zepto, directly etc.) to your img HTML element:

$('#map').attr('src', mapUrl);

And… enjoy! :>

Leave a Reply