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.
*/
(function($) { /* function searchAddress(jmap, address, settings) * This function is an internal plugin method that returns a GLatLng that can be passed * to a Google map. */ function searchAddress(jmap, address, settings) { if (jmap._mapType) { alert('Yahoo Maps Geocoding not yet supported'); } if (jmap.i.Au) { GGeocoder = new GClientGeocoder(); GGeocoder.getLatLng(address, function(point){ if (!point) { alert(address + " not found"); } else { jmap.setCenter(point,settings.zoom); var marker = new GMarker(point, {draggable: true}); jmap.addOverlay(marker); pointlocation = marker.getPoint(); marker.openInfoWindowHtml("Latitude: " + pointlocation.lat() + "<br />Longitude: " + pointlocation.lng()); GEvent.addListener(marker, "dragend", function(){ mylocation = marker.getPoint(); marker.openInfoWindowHtml("Latitude: " + pointlocation.lat() + "<br />Longitude: " + pointlocation.lng()); }); } }); } } /* directions: function(map,query, panel) * Takes a Direction query and returns directions for map. Optional panel for text information */ function searchDirections(jmap,query,panel) { // Yahoo Maps if (jmap._mapType) { alert('Yahoo Directions support not yet added') ; } // Google Maps if (jmap.i.Au) { var dirpanel = document.getElementById(panel); directions = new GDirections(jmap, dirpanel); directions.load(query); } } $.fn.extend({ /* jmap: function(settings) * The constructor method * Example: $().jmap(); */ jmap: function(settings) { var version = "1.3"; /* Default Settings*/ var settings = jQuery.extend({ provider: "google", // can be "google" or "yahoo" maptype: "hybrid", // can be "map", "sat" or "hybrid" center: [55.958858,-3.162302], // G + Y zoom: 12, // G + Y controlsize: "small", // G + Y showtype: true, // G + Y showzoom: true, // Y showpan: true, // Y showoverview: true, // G showscale: true, // Y dragging: true, // G + Y scrollzoom: true, // G + Y smoothzoom: true, // G searchfield: "#Address", searchbutton: "#findaddress", directionsto: "#to", directionsfrom: "#from", directionsfind: "#getDirections", directionspanel: "myDirections" },settings); return this.each(function(){ switch(settings.provider) { case "yahoo": var jmap = this.jMap = new YMap(this); switch(settings.maptype) { case "map": var loadmap = YAHOO_MAP_REG; break; case "sat": var loadmap = YAHOO_MAP_SAT; break; default: var loadmap = YAHOO_MAP_HYB; break; } jmap.setMapType(loadmap); jmap.drawZoomAndCenter(new YGeoPoint(settings.center[0],settings.center[1]), settings.zoom); if (settings.showtype == true){ jmap.addTypeControl(); // Type of map Control } if (settings.showzoom == true && settings.controlsize == "small" ){ jmap.addZoomShort(); // Small zoom control } if (settings.showzoom == true && settings.controlsize == "large" ){ jmap.addZoomLong(); // Large zoom control } if (settings.showpan == true) { jmap.addPanControl(); // Pan control } if (settings.showscale == false) { /* On by default */ jmap.removeZoomScale(); // Show scale bars } if (settings.dragging == false) { /* On by default */ jmap.disableDragMap(); // Is map draggable? } if (settings.scrollzoom == false) { /* On by default */ jmap.disableKeyControls(); // Mousewheel and Keyboard control } break; case "mslive": alert('Microsoft Live Maps are currently not supported but planned for version 1.4') break; default: var jmap = this.jMap = new GMap2(this); switch(settings.maptype) { case "map": var loadmap = G_NORMAL_MAP; break; case "sat": var loadmap = G_SATELLITE_MAP; break; default: var loadmap = G_HYBRID_MAP; break; } jmap.setCenter(new GLatLng(settings.center[0],settings.center[1]),settings.zoom,loadmap); switch(settings.controlsize) { case "small": jmap.addControl(new GSmallMapControl()); break; case "large": jmap.addControl(new GLargeMapControl()); break; case "none": break; default: jmap.addControl(new GSmallMapControl()); } if (settings.showtype == true){ jmap.addControl(new GMapTypeControl()); } if (settings.showoverview == true){ jmap.addControl(new GOverviewMapControl()); } if (settings.scrollzoom == true) { /* Off by default */ jmap.enableScrollWheelZoom(); } if (settings.smoothzoom == true) { /* Off by default*/ jmap.enableContinuousZoom(); } if (settings.dragging == false) { /* On by default */ jmap.disableDragging(); } } /* Seach for the lat & lng of our address*/ jQuery(settings.searchbutton).bind('click', function(){ searchAddress(jmap, jQuery(settings.searchfield).attr('value'), settings); }); /* Search for Directions */ jQuery(settings.directionsfind).bind("click", function(){ var from = $(settings.directionsfrom).attr('value'); var to = $(settings.directionsto).attr('value'); searchDirections(jmap, "from: " + from + " to: " + to, settings.directionspanel); $(settings.directionsfrom).attr('value', to); $(settings.directionsto).attr('value', ''); return false; }); /* On document unload, clean unload Google API*/ jQuery(document).unload(function(){ GUnload(); }); }); }, /* myMap: function() * Returns a map object from the API, so it's available to the user * Example: $().myMap().setCenter(...) for Google; * Example: $().myMap().drawZoomAndCenter(...) for Yahoo; */ myMap: function() { return this[0].jMap; }, /* addPoint: function() * Returns a marker to be overlayed on the Google map * Example: $().addPoint(...); */ addPoint: function(pointlat, pointlng, pointhtml, isdraggable, removable) { var jmap = this[0].jMap; // Yahoo Maps if (jmap._mapType) { var marker = new YMarker(new YGeoPoint(pointlat, pointlng)); // Create the Yahoo marker type YEvent.Capture(marker, EventsList.MouseClick, function(){ // Add mouseclick to open HTML marker.openSmartWindow(pointhtml); }); // Below code does not work as expected /*if (removable == true) { YEvent.Capture(marker, EventsList.MouseDoubleClick, function(){ jmap.removeOverlay(marker); }); }*/ jmap.addOverlay(marker); // Add marker to map } // Google Maps if (jmap.i.Au) { var marker = new GMarker(new GLatLng(pointlat,pointlng), { draggable: isdraggable } ); GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml(pointhtml); }); if (removable == true) { GEvent.addListener(marker, "dblclick", function(){ return jmap.removeOverlay(marker); }); } return jmap.addOverlay(marker); } }, /* addPoly: function(poly) * Takes an array of GLatLng points, converts it to a vector Polyline to display on the map * Example: $().addPoly(...); */ addPoly: function (poly, colour, width, alpha) { var jmap = this[0].jMap; // Yahoo Maps if (jmap._mapType) { return jmap.addOverlay(poly, colour, width, alpha); } // Google Maps if (jmap.i.Au) { return jmap.addOverlay(poly); } }, /* addRss: function() * Takes a KML file and renders it to the map. * Example: $().addPoint(...); */ addRss: function (rssfile) { var jmap = this[0].jMap; // Yahoo Maps if (jmap._mapType) { var geoXml = new YGeoRSS(rssfile); return jmap.addOverlay(geoXml); } // Google Maps if (jmap.i.Au) { var geoXml = new GGeoXml(rssfile); return jmap.addOverlay(geoXml); } } }); })(jQuery);