Web Development

Integrate Google Map into Your Website Creatively! Plugins and Inspirations

Written by Kevin Liew on 09 Oct 2012
26,693 Views • Shares
2 comments

Introduction

Google map has been available for a few years now and no doubt about it, Google has done a very good job in it with its open API, informative and detailed map. As a result, it's a famous tools for web developers. In a website, the most common page you would see a map is Contact Us page, here in this post, we have a few great designs which implemented Google Map creatively, and also a few plugins that will make your life easier.

Google Map Javascript Plugins

Here is a few Google map plugins that we reckon they are stable and very flexible. If you don't want to go through the lengthy Google Map API, you can use the following plugins to speed track the development process. However, if you dont want to go through all these javascript, you can use Google map generator from Google itself - Add Google Maps to Your website

  • gmap3 GMap3 is a very flexible, highly customizable and lightweight jQuery plugin that helps you embed Google Maps into your website. It can be customized in many different ways, all you need to do is to pass a JSON object to the GMap() function. GMap3 allows you to finely manipulate yours markers and others objects, to associate custom data usable in each event.
  • $.goMap()GoMap is another Google Map javascript plugin. When you look at its implementation examples, you will be surprised what it can do. It's customizable and it also come with a list of possible solutions.
  • jMapping This plugin is designed for quick development of a page that implements a Google Map with a list of the locations that are specified within the HTML.
  • bmap The bMap jQuery plugin allows you to quickly and easily add mapping to your website. It has been designed from the beginning to handle lots of markers, lots of layers, and custom marker icons.

If you want some more tutorials, you can visit our previous post - 10+ Google Map Javascript Resources to Kick Start Your Mapping Skill

Inspirations

We have collected 10+ websites that are using Google Map as part of their design and also, some extend its functionality and create a unique Google map experience.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

2 comments
Arunincy 4 years ago
I will use this for my website,Bookmarked your blog for further steps.
Reply
Asfix90 4 years ago
Google maps provide a very good API so you can show google maps on your website. Most webmasters are using google maps to help customers find the location of their business. Others are building full applications based on google maps. It is very easy to implement google maps on any website. http://www.flamescorpion.com/how-to-add-google-maps-to-your-website/
Reply