Menu
I'm building a website with ASP.NET MVC where one feature displays some points on a Google map, using the Google Maps Javascript API. As I have a lot of points, I don't want to fetch them all; rather, I want to get only the ones that are in the current view area that the user is looking at on the map (the bounding box).
To do that, I will make an AJAX request to my C# code that returns all the points inside a certain bounding box. However, I need to somehow create an event handler that catches whenever the map is panned or zoomed by the user.
How can I detect when a map using the Google Maps Javascript API is panned or zoomed and fire an event handler?
UPDATE: I know that I have to implement an event listener. Can someone point me towards a list of events that I can use for the Map object? click is one of those events, but what are the ones that relate to zooming and panning?
295
It looks like you're looking for the idle event:
This event is fired when the map becomes idle after panning or zooming.
Example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Events</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'idle', function() {
var bounds = map.getBounds();
console.log('North East: ' +
bounds.getNorthEast().lat() + ' ' +
bounds.getNorthEast().lng());
console.log('South West: ' +
bounds.getSouthWest().lat() + ' ' +
bounds.getSouthWest().lng());
// Your AJAX code in here ...
});
</script>
</body>
</html>
In addition, you can find the list of all events exported by the google.maps.Map object from the API Reference:
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
