Google Maps Plugin For jQuery
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 });
'Google Maps API' 카테고리의 다른 글
Google Maps JavaScript API Example: LocalSearch Control (0) | 2010.09.29 |
---|---|
Google Maps Plugin For jQuery (0) | 2010.09.29 |
Google Maps API (0) | 2010.09.12 |