Make Better Things



I like to make better things.

jQuery google map plugins

At first glance the Google Map API may seem scary, I mean, were do you possibly start? You probably only want to display a simple map that displays directions to your clients address, you don’t really want an all singing and dancing interactive map with more options than necessary. There has to be a simpler way.
Of course there is, and as with almost all web site interactivity, jQuery does offer some simple and easy to use plugins.

The plugins below offer not only an easier method to install a map, they also offer the option to add extra functionality, should you choose to need them. They also all come with a varied degree of docs, some are extensive and some non-existent, so choose your plugin wisely.

I have also listed a couple of beginner jQuery and Google Map tutorials at the the bottom of the post. If you are taking your first steps within Google Maps, I suggest you start there.


gMap – Google Maps Plugin

gMap – Google Maps Plugin

gMap – Google Maps Plugin

gMap is a very flexible, highly customizable and lightweight (only 2KB) 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, click here for a complete list of properties that can be passed.


Google Maps jQuery Plugin

Google Maps jQuery Plugin

Google Maps jQuery Plugin

The Google Maps jQuery Plugin takes away a lot of the pain from working with the Google Map Api (which can be pretty indepth for all developer levels). It allows you to embed Google Maps on your web site with ease and there are also certains portions of the Map that can be controlled via CSS (div container, info window), so that the map will sit perfectly within your web design.


Mapbox – the jQuery Map

Mapbox – the jQuery Map

Mapbox – the jQuery Map

The jQuery mapbox() plugin is for creating relatively small scale, zoomable, draggable maps with multiple layers of content. This framework could be applied to games, development plans, or any layout that could benefit from pan and zoom functions.
Mapbox likes to think of its self as a basic plugin, yes it is easy to use, but with a wide array of advanced options, here are a list of all the settings and their defaults:


jQuery GPS

jQuery GPS

jQuery GPS

jQuery GPS is a jQuery plugin for people that want to add Google maps to their website, but don’t want their website to be bogged down with the features they don’t require.
All you have to do is add inputs for addresses by simply adding default or custom ID’s. You can even use any element to trigger the event, so it doesn’t need to be embedded inside a form.
With jQuery GPS you have the option to select the position/place on the map upon first load, and to open a toolip or image on that starting location.


jMapping – for creating Google Maps from semantic markup

jMapping – for creating Google Maps from semantic markup

jMapping – for creating Google Maps from semantic markup

This plugin is designed for quick Google Map implemention with a list of the locations that are specified within the HTML It allows for as much graceful degradation as possible by having as much semantic HTML as it allows.
The plugin expects the HTML for the locations to be grouped under a common element and expects the necessary metadata to be on the location element. This way the HTML semantically reflects all of those parts and information are associated with the specific location or place.


Googlemap jQuery Plugin by Dylan Verheul

Googlemap jQuery Plugin by Dylan Verheul

Googlemap jQuery Plugin by Dylan Verheul

This plugins makes it easy to put a Google Map on your page. Look at the source code of this page if you want to know how to use the plugin. Markers can be provided by a jQuery object (containing elements in the geo microformat) or an array of objects that provide lat, lng and txt for the popup (txt being optional).


imGoogleMaps – Multiple Addresses

This is a much simpler plugin than all the rest on this page, it has been developed to create a simpler implementation with minimal and basic options. When you think about it, in most situations all you will want from a map is for an end-user to be able to view the owner’s address and be able to map directions to that address, this plugin fits that bill.
This plugins map interface is similar to what you would see on Google Maps (auto mode), while also giving the developer the ability to style their own interface (manual mode).


jMaps Framework

The JMaps Framework provides a simple yet powerful API for Google’s mapping services, that offers simple jQuery methods to do functions such as: Geocode and reverse any valid address in the world via Google’s geocoding API; Search for directions to and from any location; Add and remove Markers; Add and remove polygons and polylines; Add and remove graphic layers on the map; Add and remove Google adsense layers; Add and remove Traffic layers; Get information back such as map center, map size, map type, etc.


jQuery-PlacePicker

jQuery-PlacePicker

jQuery-PlacePicker

jQuery-PlacePicker is a geocoding jQuery UI widget with support for Google Maps API v3 (and framework ready for others) that allow users to search for and select locations.


jQmaps

jQmaps is a very easy to use and popular plugin for Google Maps, that can add custom points, expandible ballons and hotspots links.
It does not offer any docs nor does it have any working demos. If you feel comfortable using it, go for it, if not try one of the plugins above.


jQuery and Google Maps Tutorial: The Basics

jQuery and Google Maps Tutorial: The Basics

jQuery and Google Maps Tutorial: The Basics

If you have never worked with the Google Map API before it can all seem daunting. What you need is a step-by-step guide that will cover the basics and give you a better understanding of everything that is going on, and that is what this tutorial covers.


AJAX Storing and Retrieving Points – Tutorial

AJAX Storing and Retrieving Points – Tutorial

AJAX Storing and Retrieving Points – Tutorial

Taking things a step further from the previous article, in this tutorial you will learn how to store and retrieve points with using AJAX and a server-side language. This tutorial will use PHP/MySQL on the server, but it is basic enough that re-writing in another language should not be difficult.


Getting started with jQuery

It can seem challenging to know where to begin with jQuery because this tiny library does many functions. Most of its concept borrowed from structured HTML and CSS.

So Let’s look what jQuery can do for us.

What jQuery does –

Access elements in a document – without a Javascript library you may need to write a lot of code to traverse Document Object Modal (DOM) tree. A robust and efficient mechanism is offered by jQuery to access elements in a document.

Modify the appearance of a web page – CSS offers a powerful method of influencing the way a document is rendered, but it falls short when web browsers do not all support the same standards. With jQuery, developers can bridge this gap, relying on the same standards support across all browsers. In addition, jQuery can change the classes or individual style properties applied to a portion of the document even after the page has been rendered

Alter the content of a document – Not limited to mere cosmetic changes, jQuery can modify the content of a document itself with a few keystrokes. Text can be changed, images can be inserted or swapped, lists can be reordered, or the entire structure of the HTML can be rewritten and extended—all with a single easy-to-use Application Programming Interface (API).

Respond to a user’s interaction – The jQuery library offers an elegant way to intercept a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.

Animate changes being made to a document – The jQuery library provide many animations built in such as fade in , fade out etc and provide easy to use API to create new one.

Retrieve information from a server without refreshing a page – The jQuery library removes the browser-specific complexity from this process, allowing developers to focus on the server-end functionality.

Simplify common JavaScript tasks – In addition to all of the document-specific features of jQuery, the library provides enhancements to basic JavaScript constructs such as iteration and array manipulation.