Google Static Map Maker

create a Mapbox static map
Google Map of [[base.location]]
http://maps.googleapis.com/maps/api/staticmap[[ base.autoCenter == 'true' && showMarker == 'true' && '?' || '?center='+base.location.split(' ').join('+')+'&zoom='+base.zoom+'&' ]]scale=[[scale]]&size=[[base.width]]x[[base.height]]&maptype=[[base.mapType]]&sensor=false[[ base.API !== '' && '&key='+base.API || '' ]]&format=[[base.format]]&visual_refresh=true[[ showMarker == 'true' && '&markers=size:'+base.markerSize+'%7Ccolor:'+base.markerColor.split('#').join('0x')+'%7Clabel:'+base.markerLabel+'%7C'+base.location.split(' ').join('+') || '' ]]

Treat the code like an image. You can use HTML or CSS to display it.

HTML

<img src="http://maps.googleapis.com/maps/api/staticmap[[ base.autoCenter == 'true' && showMarker == 'true' && '?' || '?center='+base.location.split(' ').join('+')+'&zoom='+base.zoom+'&' ]]scale=[[scale]]&size=[[base.width]]x[[base.height]]&maptype=[[base.mapType]]&sensor=false[[ base.API !== '' && '&key='+base.API || '' ]]&format=[[base.format]]&visual_refresh=true[[ showMarker == 'true' && '&markers=size:'+base.markerSize+'%7Ccolor:'+base.markerColor.split('#').join('0x')+'%7Clabel:'+base.markerLabel+'%7C'+base.location.split(' ').join('+') || '' ]]" alt="Google Map of [[base.location]]">

Map with link to Google Maps

<a href="https://www.google.com/maps/place/[[ base.location.split(' ').join('+') ]]/"><img src="http://maps.googleapis.com/maps/api/staticmap[[ base.autoCenter == 'true' && showMarker == 'true' && '?' || '?center='+base.location.split(' ').join('+')+'&zoom='+base.zoom+'&' ]]scale=[[scale]]&size=[[base.width]]x[[base.height]]&maptype=[[base.mapType]]&sensor=false[[ base.API !== '' && '&key='+base.API || '' ]]&format=[[base.format]]&visual_refresh=true[[ showMarker == 'true' && '&markers=size:'+base.markerSize+'%7Ccolor:'+base.markerColor.split('#').join('0x')+'%7Clabel:'+base.markerLabel+'%7C'+base.location.split(' ').join('+') || '' ]]" alt="Google Map of [[base.location]]"></a>

Map with link to Google Maps directions

<a href="https://www.google.com/maps/dir//[[ base.location.split(' ').join('+') ]]/"><img src="http://maps.googleapis.com/maps/api/staticmap[[ base.autoCenter == 'true' && showMarker == 'true' && '?' || '?center='+base.location.split(' ').join('+')+'&zoom='+base.zoom+'&' ]]scale=[[scale]]&size=[[base.width]]x[[base.height]]&maptype=[[base.mapType]]&sensor=false[[ base.API !== '' && '&key='+base.API || '' ]]&format=[[base.format]]&visual_refresh=true[[ showMarker == 'true' && '&markers=size:'+base.markerSize+'%7Ccolor:'+base.markerColor.split('#').join('0x')+'%7Clabel:'+base.markerLabel+'%7C'+base.location.split(' ').join('+') || '' ]]" alt="Google Map of [[base.location]]"></a>

CSS

background-image: url(http://maps.googleapis.com/maps/api/staticmap[[ base.autoCenter == 'true' && showMarker == 'true' && '?' || '?center='+base.location.split(' ').join('+')+'&zoom='+base.zoom+'&' ]]scale=[[scale]]&size=[[base.width]]x[[base.height]]&maptype=[[base.mapType]]&sensor=false[[ base.API !== '' && '&key='+base.API || '' ]]&format=[[base.format]]&visual_refresh=true[[ showMarker == 'true' && '&markers=size:'+base.markerSize+'%7Ccolor:'+base.markerColor.split('#').join('0x')+'%7Clabel:'+base.markerLabel+'%7C'+base.location.split(' ').join('+') || '' ]]);
  1. If your site receives high traffic then you may need an API key to create your map. Read more about Google’s usage limits.
  2. Customize the fields to build your map.
  3. The “Code” tab contains the code for your map including examples.
  4. Copy and paste the code into your HTML document or a stylesheet.

You can add a static map to any website with simple HTML and no JavaScript. Using URL parameters you can describe the type of map that you want and Google will send it back.

The Static Map Maker helps you configure the Google API parameters and gives you the code in real time.

Check out the Static Maps API by Google.

Create a Google static map or a Mapbox static map.

Made by Katy DeCorah. Powered by Jekyll and Angular, hosted on Github.