12 Useful Jquery Plugins & Tutorials for Google Map

The Google Maps API provides a sophisticated way for developers and webmasters to add custom interactive maps to their websites. Below we’ve laid out several jQuery Google Maps Plugins and Tutorials that will make the installing and interaction between a map on your website much easier. Hopefully, you’ll find them helpful for your next web project.

jQuery and Google Maps Tutorial: #1 Basics

In this tutorial you will learn how to get started using jQuery inside the Google Maps environment. I will assume nothing, and explain each piece in detail.

google_map_jquery_5

Google Maps API v3 Embedded with Custom Location Pin

This tutorial aims to guide you through the process of embedding a basic map, located at a specific point with a custom pin, which can be particularly useful for ‘contact’ pages.

google_map_jquery_10

Embellishing Your Google Map with CSS3 and jQuery

Interactive maps are neat. It’s not hard to get a basic map embedded on your page, but Google provides a rich and easy to use API for embedding and decorating maps on your web page, so there should be no excuse for boring default maps.

google_map_jquery_11

Google Maps Slider

This nice Google Maps demo applies a mouseover event to a map sidebar. When you mouseover a listing in the sidebar the map pans to the selected location.

google_map_jquery_12

Interactive Google Map using the Twitter API

Using the Twitter API we will retrieve the user’s location, and then display the profile picture on the map. We will also add the click action, after which we will retrieve the user’s 5 latest tweets.

google_map_jquery_9

gmap : Smashinglabs

gMap is a jQuery plugin embedding Google Maps into your website.

google_map_jquery_1

Google Maps jQuery Plugin V1.01 – Shawn Mayzes

The Google Maps jQuery Plugin lets you simply embed Google Maps using The Google Maps JavaScript API in your web pages. To useThe Google Maps JavaScript API, you need to first sign up for an API key. Once you’ve received an API key, you can develop a map application following the instructions in this documentation.

google_map_jquery_2

MapIt – Maps Made Your Way

MapIt is a jQuery enabled plug-in that interacts with Google Maps API . The plug-in is designed to make navigating and finding key coordinates anywhere in the world a simple process. Completely driven by XML over AJAX , this plug-in helps you group and organize all your location links.

google_map_jquery_3

Point Of Interest (POI) Auto Map

Poi Auto Map combines the power of Google’s Maps and Places APIs to give you a simple way to add highly interactive Point of Interest maps to your website. All you need to do is define a starting address and a list of point of interest categories and POI Auto Map does the rest. Move the map and watch the points update. You can also define a database connection from which to source your POI points. This is the largest update yet in both features and performance.

google_map_jquery_4

Google Maps Plugin For jQuery

gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable.

google_map_jquery_6

bMap – jQuery Plugin

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.

google_map_jquery_7

gmap3 jQuery plugin

gmap3 is a jquery plugin which allows many manipulation of the google map API version 3.

google_map_jquery_8

Published by

Joaquin

I am web designer/developer, creative blogger, wordpress user & founder of idesignow.

One thought on “12 Useful Jquery Plugins & Tutorials for Google Map”

Comments are closed.