Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

« Newer Snippets
Older Snippets »
Showing 1-1 of 1 total  RSS 

jQuery Maps Interface - Easily create Google or Yahoo maps

/* jQuery Maps (jmaps) - A jQuery plugin for Google Maps API
* 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);
« Newer Snippets
Older Snippets »
Showing 1-1 of 1 total  RSS