Skip to content
Browse files

Changed pinDrop option to be a callback function upon pin drop; Added…

… examples of stuff to do on pinDrop and on autocomplete select.
  • Loading branch information...
1 parent 2b5aed6 commit b0f3ffca6b9ff4cb4ca9b93cad210a066b031985 @juliamae juliamae committed Nov 28, 2010
Showing with 57 additions and 43 deletions.
  1. +35 −6 demo/ui.demo.html
  2. +22 −37 ui.geo_autocomplete.js
View
41 demo/ui.demo.html
@@ -49,14 +49,43 @@
mapheight: 75,
geocoder_address: true,
maptype: 'roadmap',
- pinDrop: true,
map: map,
- select: function(_event, _ui) {
- var lat = _ui.item.viewport.getCenter().lat();
- var lng = _ui.item.viewport.getCenter().lng();
+
+ // Callback on pin drop
+ pinDrop: function(event) {
+ // this is the geo_autocomplete options object
+ // it contains the google maps map object and a marker object
+ var self = this;
+
+ // in pinDrop, you can do things like show an infowindow
+ google.maps.event.addListener(this.marker, 'click', function() {
+ if (!self.infowindow) {
+ self.infowindow = new google.maps.InfoWindow({
+ size: new google.maps.Size(150,50)
+ });
+ }
+ self.infowindow.setContent("<b>Location</b><br>"+event.latLng);
+ self.infowindow.open(self.map,self.marker);
+ });
+
+ google.maps.event.trigger(self.marker, 'click');
- $("#demo4_lat").val(lat);
- $("#demo4_lng").val(lng);
+ // or, you can utilize the coordinates for whatever
+ $("#demo4_lat").val(event.latLng.lat());
+ $("#demo4_lng").val(event.latLng.lng());
+ },
+
+ // Example callback on select item from autocomplete list
+ select: function(_event, _ui) {
+ if (typeof _ui.item.viewport.getCenter == "function") {
+ var lat = _ui.item.viewport.getCenter().lat();
+ var lng = _ui.item.viewport.getCenter().lng();
+
+ map.fitBounds(_ui.item.viewport);
+
+ $("#demo4_lat").val(lat);
+ $("#demo4_lng").val(lng);
+ }
}
});
}
View
59 ui.geo_autocomplete.js
@@ -41,7 +41,7 @@ $.widget( "ui.geo_autocomplete", {
* mapheight - height of static map thumbnail
* maptype - see http://code.google.com/apis/maps/documentation/staticmaps/#MapTypes
* mapsensor - see http://code.google.com/apis/maps/documentation/staticmaps/#Sensor
- * pinDrop - true: adds pinDrop option to end of results list, default false, if true, requires map
+ * pinDrop - callback function upon pin drop. adds pinDrop option to end of results list. requires map
* map - google maps map object, eg: new google.maps.Map(document.getElementById("map_canvas"), {})
* minLength - see http://jqueryui.com/demos/autocomplete/#option-minLength
* delay - see http://jqueryui.com/demos/autocomplete/#option-delay
@@ -58,7 +58,7 @@ $.widget( "ui.geo_autocomplete", {
mapheight : 100,
maptype : 'terrain',
mapsensor : false,
- pinDrop : false,
+ pinDrop : null,
map : null,
minLength : 3,
delay : 300,
@@ -137,43 +137,28 @@ $.widget( "ui.geo_autocomplete", {
// handler for click on results
pinDropSelect: function(_event, _ui) {
- if (this.map) {
- if (typeof _ui.item.viewport.getSouthWest == "function" ){
- this.map.fitBounds(_ui.item.viewport);
- } else {
- var self = this;
-
- google.maps.event.addListener(this.map, 'click', function() {
- if (self.infowindow) self.infowindow.close();
- });
-
- google.maps.event.addListener(this.map, 'click', function(event) {
- if (self.marker) {
- self.marker.setMap(null);
- self.marker = null;
- }
-
- self.marker = new google.maps.Marker({
- position: event.latLng,
- map: self.map,
- zIndex: Math.round(event.latLng.lat()*-100000)<<5
- });
+ if ( this.map && typeof _ui.item.viewport.getSouthWest != "function" ){
+ var self = this;
+
+ // Add a click listener which displays the marker to the map
+ google.maps.event.addListener(this.map, 'click', function(event){
+ if (self.infowindow) self.infowindow.close();
+
+ if (self.marker) {
+ self.marker.setMap(null);
+ self.marker = null;
+ }
- google.maps.event.addListener(self.marker, 'click', function() {
- if (!self.infowindow) {
- self.infowindow = new google.maps.InfoWindow({
- size: new google.maps.Size(150,50)
- });
- }
-
- self.infowindow.setContent("<b>Location</b><br>"+event.latLng);
- self.infowindow.open(self.map,self.marker);
- });
-
- google.maps.event.trigger(self.marker, 'click');
+ self.marker = new google.maps.Marker({
+ position: event.latLng,
+ map: self.map,
+ zIndex: Math.round(event.latLng.lat()*-100000)<<5
});
- }
- }
+
+ // Call custom pin drop handler
+ self.pinDrop(event);
+ });
+ }
}
}
});

0 comments on commit b0f3ffc

Please sign in to comment.
Something went wrong with that request. Please try again.