Optimize Google Maps

Here’s a template that I use practically every time I need to implement Google Maps: it’s Unobtrusive, adds seo and Microformats to your content and provides a non-JavaScript fallback for Accessibility. Below is the markup and some explanations, you can view the Template here.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Google Maps JavaScript API v3 Example: Info Window Simple</title>
    <link rel="profile" href="http://microformats.org/profile/hcard" />
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<style>
html,body,div,span,img,abbr{margin:0; padding:0; border:none}
.vcard{margin:1em auto; width:500px; height:500px; overflow:hidden; text-align:center; position:relative}
.gmaps-body-content{margin:0.5em}
.geo{display:none}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
  function initialize() {
    var myLatlng = new google.maps.LatLng(36.91212221138637, -76.10680103302002);
    var myOptions = {
      zoom: 12,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
    var contentString = '<div class="gmapscontent">'+
        '<h1 class="first-mapped-h">Chesapeake/Chick's Beach</h1>'+
        '<div class="gmaps-body-content">'+
        '<p><b>Chesapeake Beach</b>, also known as <b>Chics Beach</b> (and <b>Chick's Beach</b> by non-locals),' +
        'is a stretch of beaches running about two miles from the Lynnhaven Inlet to just west of the Chesapeake Bay Bridge Tunnel' +
        'in Virginia Beach, Virginia, USA. What originated as a lookout post during war, the beaches eventually turned to more ' +
        'recreational activities. The area developed in the early 1900s as a beachfront residential community. Chics was a place ' +
        'where you could pick up limeade and an ice cream. Eventually, this site became what is now Alexanders on the Bay. The terms ' +
        'Chics and Chicks Beach have stuck. It is a diverse area consisting of beach cottages, condominiums, townhouses, duplexes, ' +
        'apartments, and single-family homes. The neighborhoods of Baylake Pines and Baylake Beach hug the east side of the community, ' +
        'although the popularity of the Chicks Beach area has those in Ocean Park claiming a piece of it as well. The beach community is ' +
        'bordered on the south by Shore Drive. Shore Drive is one of the corridors leading to the tourist destination of the Virginia ' +
        'Beach oceanfront and is currently undergoing many improvements to the biking and jogging trails. Little Creek Naval Amphibious Base ' +
        'caps the west side of this community, merging longer stretches of undeveloped, protected beaches which harbor dolphin and other marine life.' +
        'Also famous in this little stretch was the "Pleasure House"...where the partiers of olden days gathered for gossiping, gambling and whatever. ' +
        'This is also where the longest bay-bridge connects to the Eastern shore, across the Chesapeake Bay. (The Chesapeake Bay-Bridge Tunnel)' +
        'The residents of this community enjoy less public traffic due to restricted parking and a relatively unknown-about neighborhood. ' +
        'The favorite activities of these neighborhoods include boating the four lakes winding through the area, jet skiing, kayaking, walking the ' +
        'beach and sailing on the Bay, and the kids engage hours of skateboarding, skimboarding and creating sand-castles.</p>'+
        '</div>'+
        '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Chesapeake Beach (Chicks Beach)'
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
  }
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(function() {
     initialize();
})
</script>
  </head>
  <body>
    <div class="vcard">
      <div id="map-canvas" style="width:500px; height:500px;"></div>
      
      <img class="photo" src="http://dev.bowdenweb.com/maps/i/google-static-map-chesapeake-beach-virginia-beach-va.png" alt="Chesapeake Beach, Virginia Beach, VA" title="Chesapeake Beach along the North Shore of Virginia Beach, VA" width="500" height="500" />
      <span class="geo"><abbr class="latitude" title="36.91212221138637">N 36° 91.212221138637</abbr><abbr class="longitude" title="-76.10680103302002">E -76° 10.680103302002</abbr></span>
    </div>
  </body>
</html>
The link rel="profile" href="http://microformats.org/profile/hcard" references the hcard Microformat and is required (in some version) when using Microformats. The styles defined in the head element are primarily for the example; it’s up to the developer to decide how or if resets are being used, aside from extra styles, and it’s quite probable that they will change often, from project to project. You should notice that .vcard‘s width and height are the same as #map-canvas‘s inline styles. Matching height and width, along with overflow:hidden on the .vcard ensure that the map is equal to the size you require and that none of our added markup is even noticeable to humanoids. The map is unobtrusive, which is crucial to keeping our behaviors separated and personally to keeping my sanity. This is extremely easy to accomplish, just tack this JavaScript into your Google Maps script:

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(function() {
     initialize();
})
Moving along to our markup, you can see that all of our content is wrapped in the div class="vcard", which is handy in a few ways. Generally, you’re going to have a wrapper around your Google Map, unless it is the only thing on your page. I’ve found that a lot of the time, especially in float-based layouts, I am constantly setting position:relative on the map’s wrapper because the map div is absolutely positioned. After our map, you can see two img elements, the first of which is commented out. Let’s touch on functionality here first: Google Maps is 3rd party and ajax dependant, two separate reasons to be on the defensive with your markup. 3rd party, because you cannot always rely on what is out of your control; yes, even Google goes down, albeit not often, but they still do. ajax because you should still be worried about what happens if the user does not have JavaScript enabled. The image comes into play here: if 3rd Party and/or JavaScript is turned off, instead of showing your users nothing, they will see an image of the exact same map that you were going to show them anyways. Obviously there is no functionality here, but we shouldn’t be worried about that; this is a fail safe, not a guaranteed interactive map. Google Maps offers Static Maps, which create maps based on url Parameters sent through standard http request and returns the map in the form of an image. As in our example:

<img src="http://maps.google.com/maps/api/staticmap?center=36.91212221138637,-76.10680103302002&zoom=12&size=500x500&sensor=false" alt="" title="" width="500" height="500" />

All I’ve done is take maps parameters and added them to the Static Maps url http://maps.google.com/maps/api/staticmap?. As you can see, the latitude, longitude, zoom level, height and width are identical, just add the ampersands in between them and equal sign after each (except for latitude/longitude and the last one). You can view the image below:

Google Static Map Example of Chesapeake Beach, Virginia Beach, VA

These Static Maps are quite handy, however we are still relying on 3rd Party; to get around this, simply save the image, renaming it by its location name. You can see where I’ve done this in the markup, with one difference, adding a class of photo to it, so it conforms to hCard‘s parameters.

Lastly, we add our latitude and longitude to the content using the Microformat class geo. Since the vcard‘s area is equal to the content we want shown, this will never be visible to humans, but will always be visible to machines. Bonus!

Also read...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>