PlayMaps is a web component based on Google Static Maps API and Google Map Search interface. It displays a static map picture—that might have been previously cached—based on coordinates of specified location, and places a Play button over it. Whenever the user presses the button, it calls the interactive Google Map Search interface with a search query according to the geocodes of the location, and renders it above the static map picture.
google.load( “maps”, “2” );
google.load( “search”, “1” );
include( “http://www.google.com/uds/solutions/mapsearch/gsmapsearch.js?mode=new” );
May work with all modern browsers.
- Google APIs are loaded on document load.
- Playing another map component may stop previously started one.
- Get a copy of PlayMaps ZIP ball.
- PlayMaps presumes you render static map images based on Google Static Maps API at page creation time with proper
altattribute—it should contain the search query of the location you specified by geocodes in the Static Maps API call.
<img class="playmaps" alt="Budapest, Hungary" id="budapestmap" src="http://maps.google.com/staticmap?center=47.498403,19.040759&zoom=1&size=400x275&zoom=14&key=YOUR_KEY" />
playmapsCSS class to each static maps you would like to convert to a playable component.
- Include PlayMaps’ stylesheet in your page, or simply append it your styles. The PlayMaps CSS refers to two locally saved Google stylesheets.
<style type="text/css"> @import "/playmaps/style.css"; </style>
- And for the last step, sign up for a Google Maps API key, and insert the Google API calls shown below into your site.
Project is still in alpha stage. Feedbacks, or any ideas are welcome at Dzone.