jQuery Maps Interface - Easily create Google or Yahoo maps
* Author: Tane Piper (digitalspaghetti@gmail.com)
* With special thanks Dave Cardwell (who helped on getting the first version of this plugin to work).
* Website: http://code.google.com/p/gmapp/
* Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
* This plugin is not affiliated with Google or Yahoo.
* For Google Maps API and T&C see http://www.google.com/apis/maps/
* For Yahoo! Maps API and T&C see http://developer.yahoo.com/maps/
*
* === Changelog ===
* Version 1.3
* Added support for creating Yahoo! Maps, can create Map, Satallite or Hybrid. Check out available options below
* Added support for creating points on Yahoo! maps.
* Added support for creating Polylines on Yahoo! maps.
* Added support for GeoRSS files on both Yahoo! and Google maps, as well as existing KML support for Google, method
* name was changed from .addKml to .addRss
* Moved directions search out of main namespace, now function that is called from within plugin by providing fields
*
* Version 1.2 (25/07/2007)
* Moved GClientGeocoder into searchAddress method
* Fixed bug in searchAddress method regarding getPoint().
*
* Version 1.1 (16/07/2007)
* Changed name to remove Google from main name - namespace now .jmap.
* Added additional options:
* + Add map dragging enable/disable.
* + Add scroll wheel zooming.
* + Add smooth continuous zooming (on certain browsers).
* + Added clean unloading of Google objects.
* Added .addPoly method. Allows the creation of polylines on the map.
* Added .addKml support for rendering KML Files.
* Added .directions Driving Direction support.
*
* Version 1.0 (13/07/2007)
* Initial version.
* Creates Google Map.
* Add points to map.
* Takes address or postcode, Geocodes and centers map. Also creates a draggable marker.
*/
1 2 3 (function($) { 4 /* function searchAddress(jmap, address, settings) 5 * This function is an internal plugin method that returns a GLatLng that can be passed 6 * to a Google map. 7 */ 8 function searchAddress(jmap, address, settings) { 9 10 if (jmap._mapType) { 11 alert('Yahoo Maps Geocoding not yet supported'); 12 } 13 14 if (jmap.i.Au) { 15 GGeocoder = new GClientGeocoder(); 16 GGeocoder.getLatLng(address, function(point){ 17 if (!point) { 18 alert(address + " not found"); 19 } else { 20 jmap.setCenter(point,settings.zoom); 21 var marker = new GMarker(point, {draggable: true}); 22 jmap.addOverlay(marker); 23 pointlocation = marker.getPoint(); 24 marker.openInfoWindowHtml("Latitude: " + pointlocation.lat() + "<br />Longitude: " + pointlocation.lng()); 25 GEvent.addListener(marker, "dragend", function(){ 26 mylocation = marker.getPoint(); 27 marker.openInfoWindowHtml("Latitude: " + pointlocation.lat() + "<br />Longitude: " + pointlocation.lng()); 28 }); 29 } 30 }); 31 } 32 } 33 34 /* directions: function(map,query, panel) 35 * Takes a Direction query and returns directions for map. Optional panel for text information 36 */ 37 function searchDirections(jmap,query,panel) { 38 // Yahoo Maps 39 if (jmap._mapType) { 40 alert('Yahoo Directions support not yet added') ; 41 } 42 43 // Google Maps 44 if (jmap.i.Au) { 45 var dirpanel = document.getElementById(panel); 46 directions = new GDirections(jmap, dirpanel); 47 directions.load(query); 48 } 49 } 50 51 $.fn.extend({ 52 /* jmap: function(settings) 53 * The constructor method 54 * Example: $().jmap(); 55 */ 56 jmap: function(settings) { 57 var version = "1.3"; 58 /* Default Settings*/ 59 var settings = jQuery.extend({ 60 provider: "google", // can be "google" or "yahoo" 61 maptype: "hybrid", // can be "map", "sat" or "hybrid" 62 center: [55.958858,-3.162302], // G + Y 63 zoom: 12, // G + Y 64 controlsize: "small", // G + Y 65 showtype: true, // G + Y 66 showzoom: true, // Y 67 showpan: true, // Y 68 showoverview: true, // G 69 showscale: true, // Y 70 dragging: true, // G + Y 71 scrollzoom: true, // G + Y 72 smoothzoom: true, // G 73 searchfield: "#Address", 74 searchbutton: "#findaddress", 75 directionsto: "#to", 76 directionsfrom: "#from", 77 directionsfind: "#getDirections", 78 directionspanel: "myDirections" 79 },settings); 80 81 return this.each(function(){ 82 switch(settings.provider) 83 { 84 case "yahoo": 85 var jmap = this.jMap = new YMap(this); 86 switch(settings.maptype) { 87 case "map": 88 var loadmap = YAHOO_MAP_REG; 89 break; 90 case "sat": 91 var loadmap = YAHOO_MAP_SAT; 92 break; 93 default: 94 var loadmap = YAHOO_MAP_HYB; 95 break; 96 } 97 jmap.setMapType(loadmap); 98 jmap.drawZoomAndCenter(new YGeoPoint(settings.center[0],settings.center[1]), settings.zoom); 99 if (settings.showtype == true){ 100 jmap.addTypeControl(); // Type of map Control 101 } 102 if (settings.showzoom == true && settings.controlsize == "small" ){ 103 jmap.addZoomShort(); // Small zoom control 104 } 105 if (settings.showzoom == true && settings.controlsize == "large" ){ 106 jmap.addZoomLong(); // Large zoom control 107 } 108 if (settings.showpan == true) { 109 jmap.addPanControl(); // Pan control 110 } 111 if (settings.showscale == false) { 112 /* On by default */ 113 jmap.removeZoomScale(); // Show scale bars 114 } 115 if (settings.dragging == false) { 116 /* On by default */ 117 jmap.disableDragMap(); // Is map draggable? 118 } 119 if (settings.scrollzoom == false) { 120 /* On by default */ 121 jmap.disableKeyControls(); // Mousewheel and Keyboard control 122 } 123 break; 124 125 case "mslive": 126 alert('Microsoft Live Maps are currently not supported but planned for version 1.4') 127 break; 128 129 default: 130 var jmap = this.jMap = new GMap2(this); 131 switch(settings.maptype) { 132 case "map": 133 var loadmap = G_NORMAL_MAP; 134 break; 135 case "sat": 136 var loadmap = G_SATELLITE_MAP; 137 break; 138 default: 139 var loadmap = G_HYBRID_MAP; 140 break; 141 } 142 jmap.setCenter(new GLatLng(settings.center[0],settings.center[1]),settings.zoom,loadmap); 143 switch(settings.controlsize) 144 { 145 case "small": 146 jmap.addControl(new GSmallMapControl()); 147 break; 148 case "large": 149 jmap.addControl(new GLargeMapControl()); 150 break; 151 case "none": 152 break; 153 default: 154 jmap.addControl(new GSmallMapControl()); 155 } 156 if (settings.showtype == true){ 157 jmap.addControl(new GMapTypeControl()); 158 } 159 if (settings.showoverview == true){ 160 jmap.addControl(new GOverviewMapControl()); 161 } 162 if (settings.scrollzoom == true) { 163 /* Off by default */ 164 jmap.enableScrollWheelZoom(); 165 } 166 if (settings.smoothzoom == true) { 167 /* Off by default*/ 168 jmap.enableContinuousZoom(); 169 } 170 if (settings.dragging == false) { 171 /* On by default */ 172 jmap.disableDragging(); 173 } 174 } 175 /* Seach for the lat & lng of our address*/ 176 jQuery(settings.searchbutton).bind('click', function(){ 177 searchAddress(jmap, jQuery(settings.searchfield).attr('value'), settings); 178 }); 179 /* Search for Directions */ 180 jQuery(settings.directionsfind).bind("click", function(){ 181 var from = $(settings.directionsfrom).attr('value'); 182 var to = $(settings.directionsto).attr('value'); 183 searchDirections(jmap, "from: " + from + " to: " + to, settings.directionspanel); 184 $(settings.directionsfrom).attr('value', to); 185 $(settings.directionsto).attr('value', ''); 186 return false; 187 }); 188 /* On document unload, clean unload Google API*/ 189 jQuery(document).unload(function(){ GUnload(); }); 190 }); 191 }, 192 /* myMap: function() 193 * Returns a map object from the API, so it's available to the user 194 * Example: $().myMap().setCenter(...) for Google; 195 * Example: $().myMap().drawZoomAndCenter(...) for Yahoo; 196 */ 197 myMap: function() { 198 return this[0].jMap; 199 }, 200 /* addPoint: function() 201 * Returns a marker to be overlayed on the Google map 202 * Example: $().addPoint(...); 203 */ 204 addPoint: function(pointlat, pointlng, pointhtml, isdraggable, removable) { 205 var jmap = this[0].jMap; 206 // Yahoo Maps 207 if (jmap._mapType) { 208 var marker = new YMarker(new YGeoPoint(pointlat, pointlng)); // Create the Yahoo marker type 209 YEvent.Capture(marker, EventsList.MouseClick, function(){ // Add mouseclick to open HTML 210 marker.openSmartWindow(pointhtml); 211 }); 212 // Below code does not work as expected 213 /*if (removable == true) { 214 YEvent.Capture(marker, EventsList.MouseDoubleClick, function(){ 215 jmap.removeOverlay(marker); 216 }); 217 }*/ 218 jmap.addOverlay(marker); // Add marker to map 219 } 220 221 // Google Maps 222 if (jmap.i.Au) { 223 var marker = new GMarker(new GLatLng(pointlat,pointlng), { draggable: isdraggable } ); 224 GEvent.addListener(marker, "click", function(){ 225 marker.openInfoWindowHtml(pointhtml); 226 }); 227 if (removable == true) { 228 GEvent.addListener(marker, "dblclick", function(){ 229 return jmap.removeOverlay(marker); 230 }); 231 } 232 return jmap.addOverlay(marker); 233 } 234 }, 235 /* addPoly: function(poly) 236 * Takes an array of GLatLng points, converts it to a vector Polyline to display on the map 237 * Example: $().addPoly(...); 238 */ 239 addPoly: function (poly, colour, width, alpha) { 240 var jmap = this[0].jMap; 241 // Yahoo Maps 242 if (jmap._mapType) { 243 return jmap.addOverlay(poly, colour, width, alpha); 244 } 245 // Google Maps 246 if (jmap.i.Au) { 247 return jmap.addOverlay(poly); 248 } 249 }, 250 /* addRss: function() 251 * Takes a KML file and renders it to the map. 252 * Example: $().addPoint(...); 253 */ 254 addRss: function (rssfile) { 255 var jmap = this[0].jMap; 256 // Yahoo Maps 257 if (jmap._mapType) { 258 var geoXml = new YGeoRSS(rssfile); 259 return jmap.addOverlay(geoXml); 260 } 261 // Google Maps 262 if (jmap.i.Au) { 263 var geoXml = new GGeoXml(rssfile); 264 return jmap.addOverlay(geoXml); 265 } 266 267 } 268 }); 269 })(jQuery);