Posted: 15th November 2013

Author: Kate

Tagged: Tutorials

Get Google Maps on your website

Google Maps is one of the most powerful tools available for displaying location based data on the internet, and we've used it many times on websites we've worked on. Google Maps integration is suitable for anything from the most basic "we are here" style map to full blown web applications. I'd like to share some examples of maps that we've integrated.

The simplest possible implementation can be seen right here on our own website. We have a small Google Map on our contact page that simply shows the location of our office with a standard map pin. It's just a static image with a click through to Google Maps where you can make use of the full set of features such as zooming in and out or getting directions. This is the most basic use of Google Maps on a website that we've done, but sometimes that's all you really need.

A more powerful example of a Google Maps integration can be found on our friends' travel blog, Trekking Asia. We built Maps support into their WordPress blog to help them share their year long Asian adventure. Andrew uses an Android app to track their current location and sends it up to WordPress where it is pinned onto the map, and we modified a plugin so they can add a location to a blog post as well. The locations are categorised, with a different coloured marker pin for each category, and blog posts have a custom icon so they stand out on the map.

The homepage map shows their entire trip, and visitors can use the filters below the map to view the different types of places they've visited. The maps at the top of the other pages show the most recent part of their journey at a closer zoom level so you can see the latest pins more clearly. The blog posts show the location of the post at an even closer zoom level so you can see nearby streets and attractions. All the maps on the site are fully interactive, allowing you to zoom in and out, move around and explore.

Another example of our Google Maps integrations was for the Fare Exchange taxi network. We helped them create several sites, for example All Putney Cars for users to book a taxi quickly and easily online from a computer or mobile phone. You can see a map on the site showing the area that is covered by the taxi firm. We also used Google Maps data to the booking form itself, so that when a user starts to type the address they want a taxi to and from, matching locations are suggested in a drop down box, just like those you see when typing a location into Google Maps itself. This allows the user to select an address that the system will understand, so they can get an accurate quote for their taxi journey before they commit to booking it.

Google Maps can be integrated into any website, and the examples above highlight just a few of the features that make it such a powerful tool. If you have an idea for a website or application using Maps, we'd love to hear from you and work with you to make it happen.

Blog posts written by former QWeb employees are not necessarily an accurate indication of the current opinions of QWeb Ltd and the information provided in tutorials might be biased or subjective, or might become out of date.

Discuss this post

Leave a comment

Your email address is used to notify you of new comments to this thread, and also to pull your Gravatar image. Your name, email address, and message are stored as encrypted text and you won't be added to any mailing list and your details won't be shared with any third party.