Interactive Google Maps Code Tutorial

Code Tutor has a nice interactive Google Maps API tutorial.

The tutorial provides a step by step guide to building a Google Maps based application. It takes you through the steps of creating a map and adding markers, information windows, Street View and polygons.

Code Tutorial allows you to adjust the html and JavaScript in the code editor and see the adjustments you make by executing the code in a separate panel. It therefore provides a great hands-on guide to the Google Maps API.

Create a Cool Mask Effect on Google Maps

Swiss Trains have open-sourced the code for a very cool masking effect on Google Maps.

The effect transforms a KML polygon into a mask that effectively highlights the polygon on the map by shading the rest of the world. You can see a demo of the effect on this Swiss Administrative Boundaries Map.

When you select a region on the Administrative Boundaries Map the chosen area is highlighted and the rest of the map shaded out.

The mask is a very effective tool. If you want to use the effect in your own Google Maps then grab the code from GitHub - Masked Polygons.

______________

Create a Real-Time Flickr Google Map

.net magazine has published a great tutorial on how to create a real-time animated Flickr map. The tutorial was written by James Christian and Ben Gannaway the creators of the excellent Net-a-Porter Live Google Map.

The tutorial explains how to create a Google Map that animates in near real-time through images posted on Flickr. The tutorial includes how to work with the Flickr API and how to customise the look of your map.

Alongside the tutorial is a demo map and a link to download the full source code.

Integrate Google Maps and Flickr into a Real-Time App

________________

Google Maps and Twitter Tutorial

Interactive Google Map using the Twitter API

Codrops has an interesting tutorial that shows you how to create a Google Map with the Twitter API.

The completed map uses the profile pictures of Twitter users as the map markers. The markers are displayed on the map using the Twitter API's geocoding service. If you click on a profile picture a custom designed information window opens displaying the last five Tweets of the selected person.

You can view a demo of the completed Twitter map in action here.

_____________

HTML5 Styling of Google Maps

Sparkgeo - Where Are You Demo

Sparkgeo has created a nice demo of an animated HTML5 radial gradient placed on top of a Google Map. The HTML5 canvas radial gradient adds a nice effect to the map and helps to focus the eye of the user on a particular location. However this won't work unless the user has a modern web browser (Internet Explorer users are likely to be disappointed).

Sparkgeo has even been kind enough to provide a tutorial on how the effect is created. Sparkgeo has also produced a tutorial on how to add labels to your map using the makerWithLabel.js extension, created by Gary Little, which can be found in the Google Maps Utility Library

To provide another demonstration of the gradient effect I've added it to this map of the London Blitz.



_____________

Google Maps Tutorials

Geocodezip - Using the Google Maps API v3

Geocodezip has put together a great list of examples and tutorials for creating Google Maps with V3 of the Google Maps API (and V2).

The examples range from the very simple (for example adding coloured map markers to a map) to more complex examples (such as animated driving directions). The list includes a number of examples of ways to use driving directions, polygons, polylines and create custom information windows.

If you are interested in or involved in creating Google Maps mashups then this long list of Google Maps examples and tutorials will undoubtedly prove very useful.

________________

Isochrone Google Maps Tutorial

Create an Isochrone Map
Isochrone maps show travel times from a given location. Most isochrone Google Maps allow the user to select a location and then see how far they can travel in a set time from that destination.

One of the best isochrone maps built with the Google Maps API is the
London at Night map.



The London at Night map shows how long it takes to get to anywhere in London by night bus.

If you would like to create your own isochrone map then a good place to start is the Flying Memes tutorial. The Flying Memes isochrone map uses the directions service to search for points that surpass a given time limit from the given location.

• Intro
• Demo
• Github source code
• Another good demo of an isochrone map

_____________