Here is the code for what I am working on right now. It's nowhere complete, but I'm looking to build a fully functional application for jQuery and Google Maps.
/* * Google Map Application (GMApp) * Author: Tane Piper ([EMAIL PROTECTED]) * Website: http://digitalspaghetti.tooum.net * Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php * * === Changelog === * Version 0.1 * + Initial Version */ jQuery.gmapp = { build : function(settings) { /* Default Settings*/ settings = jQuery.extend({ maptype: G_HYBRID_TYPE, center: [55.958858,-3.162302], zoom: 12, control: "small", showtype: true, showoverview: true, infoarea: "#gmapp-info" },settings); if (GBrowserIsCompatible()) { return this.each(function(){ var map = new GMap2 (this); var geocoder = new GClientGeocoder(); var infoarea = settings.infoarea; map.setCenter(new GLatLng(settings.center[0],settings.center[1]),settings.zoom,settings.maptype); switch(settings.control) { case "small": map.addControl(new GSmallMapControl()); break; case "large": map.addControl(new GLargeMapControl()); break; default: map.addControl(new GSmallMapControl()); } if (settings.showtype == true){ map.addControl(new GMapTypeControl()); } if (settings.showoverview == true){ map.addControl(new GOverviewMapControl()); } /* Seach for the lat & lng of our address*/ jQuery('#findaddress').bind('click', function(){ jQuery.gmapp.searchAddress(jQuery('#Address').attr('value'), map, geocoder); }); }); } }, searchAddress : function(address,map,geocoder) { geocoder.getLatLng( address, function(point){ if (!point) { alert(address + " not found"); } else { map.setCenter(point,12); var marker = new GMarker(point, {draggable: true}); map.addOverlay(marker); marker.openInfoWindowHtml("Lat: " + point.lat() + " Lng: " + point.lng()); GEvent.addListener(marker, "dragend", function(){ mylocation = marker.getPoint(); marker.openInfoWindowHtml("Latitude: " + mylocation.lat() + "<br />Longitude: " + mylocation.lng()); }); } }); }, } jQuery.fn.gmapp = jQuery.gmapp.build; To use it, create your div area and specify the width and height. Then do $('#yourdiv').gmapp(); to activate. At the moment, you can create a form with a field id="Address" and a submit button id="findaddress". This will then geocode any address you type in and center the map on it, adding a marker. You can then drag the marker around and it will give you the lat & lng position. At the moment, thats pretty much all it does. I'm working on version 0.2 just now with more functionality for my application, but I'm happy to share it. On 7/9/07, Pete <[EMAIL PROTECTED]> wrote:
Hi All, Does anyone know of a Google Maps like interface implemented using JQuery? The only real requirement is that a user can "zoom in/out". On zoom, a new image is properly loaded in terms of zoom and user expected location. If not, could you point me to a couple functions within JQuery that would be a good starting point for this type of project? Cheers, Pete
-- Tane Piper http://digitalspaghetti.tooum.net This email is: [ ] blogable [ x ] ask first [ ] private
