Google Light Maps

As a developer of several high traffic sites I am constantly interested in shaving time off both page load and render.   As I was reviewing the performance of our real estate search sites I noticed Google Maps took roughly 1.5 seconds to download and render in Firefox 3 with 20 marker points.

The majority of our visitors arrive via Google searches that typically render search results in less than 500ms.  For our site to require an expense of 3x this just to render a map with no other page content is excessive.  We sought a solution that preserved the geo-spatial association of our data afforded by a map with a greatly reduced download and rendering cost.

The solution materialized in light maps, a very lightweight Google Mapping application that makes use of the Google Maps Static API and jQuery.

To learn more : http://github.com/zadams/light-maps

Adding light maps to your site only requires 5 steps:

1) Get a Google Maps API key for your domain: http://code.google.com/apis/maps/signup.html

2) Create a page and include jQuery and the light maps JS files:

<script type='text/javascript'>
      //<![CDATA[
        document.write(unescape("%3Cscript src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
      //]]>
    </script>
    <script src="./scripts/light-map.js" type='text/javascript'></script>

3) Create a div to contain your map and give it dimensions

<div id="map_layer" style="width:584px; height:368px;"></div>

4) Generate a static image request to Google maps that includes your map points

<div id="map_layer" style="width:584px; height:368px;">
    <img src="http://maps.google.com/staticmap?center=37.4419,-122.1419&zoom=13&size=584x368&maptype=roadmap&markers=37.4419,-122.1419,red%7C37.4366,-122.1521,red%7C37.4299,-122.1256%7C37.4521,-122.1619,red%7C37.4301,-122.1691,red&sensor=false&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSsTL4WIgxhMZ0ZK_kHjwHeQuOD4xQJpBVbSrqNn69S6DOTv203MQ5ufA" alt="map with markers" id="mapimage">
</div>

5) Create a JSON object named mapinfo that contains each of your map points and a centerpoint.

<script type="text/javascript">
  var mapinfo = {
    "centerpoint": {"lat":"37.4419", "long":"-122.1419"},
    "zoomlevel": "13",
    "markers": [
          {"point":{"lat": "37.4419","long": "-122.1419"}},
          {"point":{"lat": "37.4366","long": "-122.1521"}},
          {"point":{"lat": "37.4301","long": "-122.1691"}},
          {"point":{"lat": "37.4299","long": "-122.1256"}},
          {"point":{"lat": "37.4521","long": "-122.1619"}}
      ]
  };
</script>

Done! Your finished product should look something like http://www.zadams.com/dev/light-maps/sample.html

If you are interested in a real world example we’ve used Light Maps to reduce download and render time in production on all of our core web products including www.apartmentguide.com, www.rentals.com, www.rentalhouses.com and www.newhomeguide.com. While a recent decision was made to remove the static map component to reduce API request to Google Maps the dynamic component that renders a map from JSON is still in place if you’d like to see a working example.