All geek questions in one place

Making AJAX Requests When a User Modifies a Map Using the Google Maps Javascript API

I am building a website with ASP.NET MVC where one function displays some points on a Google map using the Google Maps JavaScript API. Since I have many points, I do not want to receive all of them; rather, I want to get only those that are in the current viewing area that the user is looking at on the map (the bounding box).

To do this, I will make an AJAX request to my C # code, which returns all points within a certain bounding box. However, I need to somehow create an event handler that will intercept whenever the map is panned or scaled by the user.

How can I detect when a map using the Google Javascript Maps API is panned or scaled and start an event handler?

UPDATE: I know that I have to implement an event listener. Can someone point me to a list of events that I can use for the Map object? click- this is one of those events, but which of them are related to scaling and panning?

+3
source share
3 answers

It looks like you are looking for an event idle:

This event is fired when the card becomes inactive 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>

, , google.maps.Map API:

+5

, ... .

v3 v3

0

this is a list of Gevents-> here

probably not all listed

0
source

Source: https://habr.com/ru/post/1750769/

More articles:


All Articles