Google Map In Rails

http://gmap.nurtext.de/

What is gMap?

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.

Example
This tiny line of code is being used to embed the map below. Simple, isn't it?

$("#map").gMap();

Nutzungsbedingungen

Karte

Satellit

Gelände

2000 Meile/n

5000 km

Simple map with marker

Displays a simple map with controls and adds one marker. The viewport gets centered automatically.

$("#map1").gMap({ markers: [{ latitude: 47.660937,

                              longitude: 9.569803 }] });

Terms of Use

Map

Satellite

Terrain

2000 mi

5000 km

Different map type

Changes the map type to physical view.
Please note: Available since version 1.0.1

$("#map2").gMap({ maptype: G_PHYSICAL_MAP });

Terms of Use

Map

Satellite

Terrain

2000 mi

5000 km

Map with marker and info window

Same as example above but with info window that pops up.

$("#map3").gMap({ markers: [{ latitude: 47.660937,

                              longitude: 9.569803,

                              html: "Tettnang, Germany",

                              popup: true }],

                  zoom: 6 });

Tettnang, Germany

Map data ©2011 Europa Technologies, Google, Tele Atlas - Terms of Use

Map

Satellite

Terrain

100 mi

200 km

Addresses (geocoding) and references

Since version 1.1.0 you can use addresses instead of latitude/longitude.
gMap automatically geocodes the given string and places a marker or even center the viewport. You can set the html-property of a marker to "_address" or "_latlng" to display the address or latitude/longitude.

$("#map4").gMap({ markers: [{ latitude: 47.651968,

                              longitude: 9.478485,

                              html: "_latlng" },

                            { address: "Tettnang, Germany",

                              html: "The place I live" },

                            { address: "Langenargen, Germany",

                              html: "_address" }],

                  address: "Braitenrain, Germany",

                  zoom: 10 });

Map data ©2011 Google, Tele Atlas - Terms of Use

Map

Satellite

Terrain

5 mi

10 km

Extended usage

Map without controls, custom marker images, multiple markers, custom viewport position and zoom.

$("#map4").gMap({ controls: false,

                  scrollwheel: false,

                  markers: [{ latitude: 47.670553,

                              longitude: 9.588479,

                              icon: { image: "images/gmap_pin_orange.png",

                                      iconsize: [26, 46],

                                      iconanchor: [12,46],

                                      infowindowanchor: [12, 0] } },

                            { latitude: 47.65197522925437,

                              longitude: 9.47845458984375 },

                            { latitude: 47.594996,

                              longitude: 9.600708,

                              icon: { image: "images/gmap_pin_grey.png",

                                      iconsize: [26, 46],

                                      iconanchor: [12,46],

                                      infowindowanchor: [12, 0] } }],

                  icon: { image: "images/gmap_pin.png", 

                          iconsize: [26, 46],

                          iconanchor: [12, 46],

                          infowindowanchor: [12, 0] },

                  latitude: 47.58969,

                  longitude: 9.473413,

                  zoom: 10 });

Map data ©2011 Google, Tele Atlas - Terms of Use

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 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!

HTML structure

The HTML structure is quite simple too. Just place a

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.

id="map">

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.

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 greatest 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:

HTML string to get prepended to a marker's info window. Useful for styling through CSS.

html_append: string ^{since 1.0.1}

Default:

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:           '
',

    html_append:            '
',

    icon:

    {

        image:              "images/gmap_pin.png",

        shadow:             false,

        iconsize:           [19, 21],

        shadowsize:         false,

        iconanchor:         [4, 19],

        infowindowanchor:   [8, 2]

    }

};