jQuery Code for Google or Yahoo! Map Interface

Google or yahoo Map Interface

The jQuery Google or yahoo Map Interface function used to adding a map view into your web application. This is the plugin created in jQuery supporting for creating points on Yahoo! and Google Maps, create polylines, adding geo files and supporting for Satellite or Hybrid map view

jQuery Code Map Interface


/* 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, Satellite 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 */



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



Related Topic The List of Most Popular Blog Widgets
Jquery Sub-menu Elements
Javascript Libraries List
How to Create Robot.txt File
Complete List of All Meta Tags

nScraps.com 2011   Privacy Policy  Terms of Service  Feedback