PlayMaps—an unobtrusive embedded map concept for your web application

Download PlayMaps ZIP archivePlayMaps 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.

Users with no or JavaScript support disabled, see the informative static map which, in addition, can be downloaded for latter usage or printing purpose. Users with JavaScript enabled are encouraged to “play the map” and enjoy the searchable map interface.

Budapest, Magyarország

@import “http://xn--gbor-5na.20y.hu/playmaps/style.css”;

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.

Known issues

  • Google APIs are loaded on document load.
  • Playing another map component may stop previously started one.

How to use it

  • 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 alt attribute—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&amp;zoom=1&size=400x275&amp;zoom=14&amp;key=YOUR_KEY" />
  • Add playmaps CSS class to each static maps you would like to convert to a playable component.
  • Include PlayMaps’ JavaScript library in your page.
    <script type="text/javascript"
     src="/playmaps/lib.js"></script>
  • 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.
    <script type="text/javascript"
     src="http://www.google.com/jsapi?key=YOUR_KEY&amp;async=2"></script>
    <script type="text/javascript">
      google.load( "maps", "2" );
      google.load( "search", "1" );
      include( "http://www.google.com/uds/solutions/mapsearch/gsmapsearch.js?mode=new" );
    </script>

Project is still in alpha stage. Feedbacks, or any ideas are welcome at Dzone.