TYZEN's NETLOG

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.

Simple map with marker

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

$("#map1").gMap({ markers: [{ latitude: 37.494177,
                              longitude: 127.087176 }] });

Different map type

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

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

Map with marker and info window

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

$("#map3").gMap({ markers: [{ latitude: 37.494177,
                              longitude: 127.087176,
                              html: Ilwon-Dong, Kangnam-Gu, Seoul, Korea,
                              popup: true }],
                  zoom: 13 });

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 });

Extended usage

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

$("#map5").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 });