Add Google maps to your site

I am sure that by now you have all seen the new Google Maps feature. Some of you may already be linking to it from your address information on your site. However, what is exciting is that Google allow you to embed these maps directly into your site.

Features

As you can see from the example below, it is now possible to add Google Maps directly to your own site. This map offers you all of the functionality of the real Google maps including drag and drop support, zoom features and even satellite map overlays.

Google offers a whole range of customisation features including, but not limited to:

  • Plotting multiple points extracted from a database
  • Associating additional information with points through the use of information windows which appear when you click on a point (try clicking on the marker displayed below)
  • Customise the appearance of markers
  • Plot outlines or routes as well as single points
  • Add your own custom scripts to do pretty much anything when a user clicks a marker

Downsides

However, before you get too excited you should be aware of the drawbacks.

This product is still in Beta and although Google’s betas are normally stable, it is possible you will encounter various bugs in its use. Furthermore, Google are constantly updating the product as they move towards a final release and so it may be necessary to update your code to accommodate these improvements.

It is also important to note that this application does require JavaScript to operate and so does not meet Accessibility guidelines. Sites will need to ensure that information provided on the map is also accessible through other means.

Unsurprisingly Google are reserving the right to associate advertising with these maps and so you can expect this to appear once the product moves out of Beta.

That said this is still an excellent product and a real addition to any site that needs to display location information. It is both user friendly, easy to implement but also incredibly powerful if you want to get into the depths of its functionality.

Boagworks

Boagworld