gMap | About

Google Maps Plugin for jQuery

gMap for jQuery is no longer maintained

The Google Maps JavaScript API Version 2 has been officially deprecated as of May 19, 2010. The V2 API will continue to work until May 19, 2013. We encourage you to migrate your code to version 3 of the Maps JavaScript API.

Getting started…

…with gMap is very easy. Simply follow these steps and you're ready to go!

  1. Requirements
  2. Installation
  3. HTML structure
  4. Creating a map
  5. Customizing

Requirements

There are a two requirements you need to meet before you can use gMap to display Google Maps on your website. First you need to sign up for a Google Maps API key. Second you need the jQuery library at least in version 1.3.

Installation

Download the latest version of gMap and include the Google Maps API along with jQuery and gMap in the <head> section of your website. Don't forget to replace "API_KEY" with your actual API key or the map won't work when used on a real domain!

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=API_KEY"></script>
<script type="text/javascript" src="javascripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.gmap-1.0.4-min.js"></script>

HTML structure

The HTML structure is quite simple too. Just place a <div> somewhere on your page, style it with CSS (don't forget to assign a fixed width & height) and give it a unique ID or class.

<div id="map"></div>

Creating a map

Select the new div element using jQuery's selectors and call the gMap() function on it. I recommend to call the function as soon as the DOM is ready. Please refer to jQuery Events/ready for further infomation.

<script type="text/javascript">
$(function() {
    $("#map").gMap();
});
</script>

Customizing

gMap can be customized in many different ways. All you need to do is to pass a JSON object to the gMap() function. Please see below for a complete list of properties that can be passed. Items with no default value are mandatory.

address: string since 1.1.0
Default: ""
Address on which the viewport will be centered.
latitude: float
Default: 0
Point on which the viewport will be centered. If not given and no markers are defined the viewport defaults to world view.
longitude: float
Default: 0.
Same as above but for longitude…
zoom: integer
Default: 1
Zoom value from 1 to 19 where 19 is the largest and 1 the smallest.
markers: array
Default: []
List of points beeing marked on the map. Every entry in this array has to be in JSON. If at least one entry is given the viewport will be centered to the first point/address. Every entry contains the following properties:
address: string since 1.1.0
Address where the marker will be drawn
latitude: float
Point on the map where the marker will be drawn
longitude: float
Same as above but for longitude…
html: string
Default: ""
Content that will be shown within the info window for this marker. If empty no info window will be shown when the user clicks the marker.
Since 1.1.0 you can set the value to _address or _latlng to
display the respective values of the current marker
popup: boolean
Default: false
If true the info window for this marker will be shown when the map finished loading. If "html" is empty this option will be ignored.
icon: json since 1.0.2
Subset of properties for defining a custom image for the current marker. Please see the global "icon" property below for a list of options.
controls: array
Default: []
A simple array of string values representing the function names (without "()") to add controls. Please refer to the Google Maps API for possible values. If empty the default map controls will be applied.
scrollwheel: boolean
Default: true
Set to false to disable zooming with your mouses scrollwheel. If "controls" is not set this option will be ignored (because default map controls are applied).
maptype: variable since 1.0.1
Default: G_NORMAL_MAP
Predefined variable for setting the map type. Please refer to the
Google Maps API for possible values.
html_prepend: string since 1.0.1
Default: <div class="gmap_marker">
HTML string to get prepended to a marker's info window. Useful for styling through CSS.
html_append: string since 1.0.1
Default: </div>
HTML string to get appended to a marker's info window.
icon: json
Subset of properties for defining a custom marker image for all markers.
image: string
Default: http://www.google.com/mapfiles/marker.png
Full path to a image that indicates the marker on the map.
shadow: string
Default: http://www.google.com/mapfiles/shadow50.png
Full path to a image that indicates the shadow for the marker image on a map. This property is optional (e.g. your image already includes a drop shadow).
iconsize: array
Default: [20, 34]
A simple array of integer values for width and height valid for "image".
shadowsize: array
Default: [37, 34]
Same as above, only for "shadow".
iconanchor: array
Default: [9, 34]
The pixel coordinate relative to the top left corner of the icon image at which this icon is anchored to the map.
infowindowanchor: array
Default: [9, 2]
The pixel coordinate relative to the top left corner of the icon image at which the info window is anchored to this icon.

Please see below for a fully featured example of all properties.

options = 
{
    latitude:               47.58969,
    longitude:              9.473413,
    zoom:                   10,
    markers:                [{latitude: 47.670553, longitude: 9.588479, html: "Tettnang, Germany"},
                             {latitude: 47.65197522925437, longitude: 9.47845458984375, html: "Friedrichshafen, Germany"}],
    controls:               ["GSmallMapControl", "GMapTypeControl"],
    scrollwheel:            false,
    maptype:                G_NORMAL_MAP,
    html_prepend:           '<div class="gmap_marker">',
    html_append:            '</div>',
    icon:
    {
        image:              "images/gmap_pin.png",
        shadow:             false,
        iconsize:           [19, 21],
        shadowsize:         false,
        iconanchor:         [4, 19],
        infowindowanchor:   [8, 2]
    }
};