This is the preserved documentation for the gMap port for Google Maps API v3. Return to the gMap archive or see the historical examples.

V2 note

Google Maps API V2 is no longer supported in the 3.0.0 version. The following documentation is for the V3 version only. The original page directed readers who needed V2 documentation to gmap.nurtext.de/documentation.html and provided a separate migration guide.

Getting started

Getting started with gMap involved five parts:

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

Requirements

The original instructions required jQuery and the Google Maps scripts. They showed these CDN includes:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

These URLs are reproduced only as an archival reference. They are not loaded by this page.

Installation

The plugin script was included with the Google Maps API and jQuery at the bottom of the page, just before the closing body tag:

<script type="text/javascript" src="javascripts/jquery.gmap-v3-min.js"></script>

HTML structure

The map needed a div with a unique ID or class and a fixed width and height in CSS:

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

Creating a map

The element was selected with jQuery and the plugin was initialized when the DOM was ready:

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

Getting the Google Maps object after initialization

The historical documentation exposed the underlying google.maps object through jQuery data:

var gmap = $("#map").data("$gmap");

Customizing

Options were passed to gMap() as an object. The following list preserves the names, defaults and notes shown in the archived documentation.

General options

log - boolean, since V3. Default: false. When enabled, it logged geocoding errors and marker additions to the JavaScript console.

address - string, since 1.1.0. Default: "". Address on which the viewport would be centered.

latitude - float. Default: 0. Point on which the viewport would be centered. If it was not supplied and no markers were defined, the viewport defaulted to a world view.

longitude - float. Default: 0. The longitude used with latitude.

zoom - integer. Default: 1. The documentation accepted values from 1 to 19, where 19 was the greatest zoom and 1 the smallest.

Markers

markers - array. Default: []. Each array entry described a point in an object. If at least one entry was supplied, the viewport was centered on the first point or address.

Each marker could contain:

  • address - string, since 1.1.0; the address where the marker would be drawn;
  • latitude - float; the latitude where the marker would be drawn;
  • longitude - float; the corresponding longitude;
  • html - string, default ""; content for the marker's info window. An empty value meant no info window. Since 1.1.0, _address and _latlng could be used to display the respective marker value;
  • popup - boolean, default false; when true, the marker's info window opened after the map finished loading. It was ignored if html was empty;
  • icon - object, since 1.0.2; marker-specific custom image settings using the icon properties listed below.

Map controls

mapTypeControl - boolean, since V3. Default: true. It let the user toggle between map types such as ROADMAP and SATELLITE.

zoomControl - boolean, since V3. Default: true. It displayed the control used to change the zoom level.

panControl - boolean, since V3. Default: false. It displayed buttons for panning the map.

scaleControl - boolean, since V3. Default: false. It displayed a map scale.

streetViewControl - boolean, since V3. Default: true. It displayed the Pegman control used to enter Street View.

scrollwheel - boolean. Default: true. Setting it to false disabled scroll-wheel zooming. The archived page noted that this option was ignored if controls was not set because the default map controls were applied.

controls - object, changed in V3. Default: []. It represented additional custom controls and was not related to the V2 controls array. Each item used:

  • pos - a google.maps.ControlPosition constant, with no default;
  • div - the DOM object to use as the control, with no default.

Map type and info-window HTML

maptype - variable, changed in V3. Default: google.maps.MapTypeId.ROADMAP. It selected the Google Maps map type.

html_prepend - string, since 1.0.1. Default: <div class="gmap_marker">. The string was prepended to a marker's info-window content for CSS styling.

html_append - string, since 1.0.1. Default: </div>. The string was appended to a marker's info-window content.

Global marker icon

icon - object. It set a custom marker image for all markers with these properties:

  • image - string, default http://www.google.com/mapfiles/marker.png; full path to the marker image;
  • shadow - string, default http://www.google.com/mapfiles/shadow50.png; full path to the shadow image. This was optional when the marker image already included a shadow;
  • iconsize - array, default [20, 34]; marker image width and height;
  • shadowsize - array, default [37, 34]; shadow image width and height;
  • iconanchor - array, default [9, 34]; pixel coordinate relative to the image's top-left corner at which the icon was anchored to the map;
  • infowindowanchor - array, default [9, 2]; pixel coordinate relative to the image's top-left corner at which the info window was anchored.

Complete historical options example

The archived page ended with this full configuration object:

options = {
    log:                    true,
    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:               [{ div: myButton, pos: google.maps.ControlPosition.BOTTOM_CENTER }],
    scrollwheel:            false,
    mapTypeControl:         false,
    zoomControl:            false,
    panControl:             true,
    scaleControl:           true,
    streetViewControl:      false,
    maptype:                google.maps.MapTypeId.ROADMAP,
    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]
    }
};

Archive basis: the complete article body captured at www.smashinglabs.pl/gmap-documentation on 12 March 2011. Formatting was converted to static Markdown; obsolete executable dependencies were not restored.