Created
December 7, 2012 14:44
-
-
Save wholypantalones/4233688 to your computer and use it in GitHub Desktop.
Google Maps V3 API Draggable Rectangle
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var mapOptions = { | |
zoom: 8, | |
center: new google.maps.LatLng(43, -85), | |
mapTypeId: google.maps.MapTypeId.ROADMAP | |
}; | |
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions); | |
var geocoder = new google.maps.Geocoder(); | |
$("#search_address").focus().autocomplete({ | |
source: function(request, response) { | |
if (geocoder == null){ | |
geocoder = new google.maps.Geocoder(); | |
} | |
geocoder.geocode( {'address': request.term }, function(results, status) { | |
if (status == google.maps.GeocoderStatus.OK) { | |
var searchLoc = results[0].geometry.location; | |
var lat = results[0].geometry.location.lat(); | |
var lng = results[0].geometry.location.lng(); | |
var latlng = new google.maps.LatLng(lat, lng); | |
var bounds = results[0].geometry.bounds; | |
geocoder.geocode({'latLng': latlng}, function(results1, status1) { | |
if (status1 == google.maps.GeocoderStatus.OK) { | |
if (results1[2]) { | |
response($.map(results1, function(loc) { | |
return { | |
label : loc.formatted_address, | |
value : loc.formatted_address, | |
bounds : loc.geometry.bounds, | |
} | |
})); | |
} | |
} | |
}); | |
} | |
}); | |
}, | |
select: function(event,ui){ | |
var bounds = ui.item.bounds; | |
map.fitBounds(bounds); | |
ne = bounds.getNorthEast(); // LatLng of the north-east corner | |
sw = bounds.getSouthWest(); // LatLng of the south-west corner | |
} //select | |
}); // autocomplete | |
// Plot two markers to represent the Rectangle's bounds. | |
marker1 = new google.maps.Marker({ | |
map: map, | |
position: new google.maps.LatLng(sw.lat(), sw.lng()), | |
draggable: true, | |
title: 'South West Corner' | |
}); | |
marker2 = new google.maps.Marker({ | |
map: map, | |
position: new google.maps.LatLng(ne.lat(), ne.lng()), | |
draggable: true, | |
title: 'North East Corner' | |
}); | |
// Allow user to drag each marker to resize the size of the Rectangle. | |
google.maps.event.addListener(marker1, 'drag', redraw); | |
google.maps.event.addListener(marker2, 'drag', redraw); | |
// Create a new Rectangle overlay and place it on the map. Size | |
// will be determined by the LatLngBounds based on the two Marker | |
// positions. | |
rectangle = new google.maps.Rectangle({ | |
map: map, | |
fillColor: "#900", | |
strokeColor: "#900", | |
fillOpacity: "0.2" | |
}); | |
redraw(); | |
// create an array of coordinates to zoom on | |
var latlng = [{ | |
name: "South West Marker", | |
latlng: new google.maps.LatLng(sw.lat(), sw.lng()) | |
}, { | |
name: "North East Marker", | |
latlng: new google.maps.LatLng(ne.lat(), ne.lng()) | |
}]; | |
var latlngbounds = new google.maps.LatLngBounds(); | |
for (var i = 0; i < latlng.length; i++) { | |
latlngbounds.extend(latlng[i].latlng); | |
} | |
map.fitBounds(latlngbounds); | |
updateMarkerPosition1(marker1.getPosition()); | |
updateMarkerPosition2(marker2.getPosition()); | |
// Add dragging event listeners. | |
google.maps.event.addListener(marker1, 'drag', function() { | |
updateMarkerPosition1(marker1.getPosition()); | |
}); | |
google.maps.event.addListener(marker2, 'drag', function() { | |
updateMarkerPosition2(marker2.getPosition()); | |
}); | |
google.maps.event.addListener(marker1, 'dragend', function() { | |
updateMarkerPosition1(marker1.getPosition()); | |
}); | |
google.maps.event.addListener(marker2, 'dragend', function() { | |
updateMarkerPosition2(marker2.getPosition()); | |
}); | |
// functions | |
function redraw() { | |
var latLngBounds = new google.maps.LatLngBounds( | |
marker1.getPosition(), | |
marker2.getPosition() | |
); | |
rectangle.setBounds(latLngBounds); | |
//console.log(marker1.getPosition()+","+marker2.getPosition()); | |
} | |
function updateMarkerPosition1(latLng) { | |
$("#swlat").val(latLng.lat()); | |
$("#swlng").val(latLng.lng()); | |
} | |
function updateMarkerPosition2(latLng) { | |
$("#nelat").val(latLng.lat()); | |
$("#nelng").val(latLng.lng()); | |
} | |
// call this to remove all points on action | |
function removeOverlays() { | |
if (typeof rectangle !== "undefined") { | |
rectangle.setMap(null); | |
} | |
if (typeof marker1 !== "undefined") { | |
marker1.setMap(null); | |
} | |
if (typeof marker2 !== "undefined") { | |
marker2.setMap(null); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment