Google Maps API 3 Load Markers from MySQL from current position

Jokus

I'm trying to make a map with google maps api, that displays a lot of markers from a MySQL Database. I did nearly everything as it is written in the Google Maps API Tutorial (https://developers.google.com/maps/articles/phpsqlajax_v3?hl=de).

My Problem:

I don't want to load all markers at once, but only those that are between the bounds of my current view.

For that my "phpsqlajax_genxml.php" gets the 4 edges of my current view as GET-variables. That works fine, but I don't know how to handle the javascript-part.

My first try was to insert a handler, that updates the map when the bounds change:

google.maps.event.addListener(map, 'bounds_changed', function() {
  var bounds = map.getBounds();

  var swPoint = bounds.getSouthWest();
  var nePoint = bounds.getNorthEast();

  var swLat = swPoint.lat();
  var swLng = swPoint.lng();
  var neLat = nePoint.lat();
  var neLng = nePoint.lng();

  var qs = '&swLat=' + swLat + '&swLng=' + swLng + '&neLat=' + neLat + '&neLng=' + neLng;
  downloadUrl("./includes/phpsqlajax_genxml.php?sess=<?php print session_id(); 
                  ?>"+qs,function(data){

      var xml = data.responseXML;
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var type = markers[i].getAttribute("type");
        var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
        var html = "<b>" + name + "</b> <br/>" + address;
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
          map: map,
          position: point,
          icon: icon.icon,
          shadow: icon.shadow
        });
        bindInfoWindow(marker, map, infoWindow, html);
      }
  });

But that would update the map every milisecond while I'm scrolling arround the map. How may I update that only every second?

The main Problem is how to insert only the new Caches to the map and delete those that are out of my view. I have no idea how to do that.

Up to now the "DownloadUrl"-function downloads every milisecond every cache in that area and also downloads those that ones I have already downloaded, so you may see there every marker a thousand times.

May someone help me, please? :)

Dr.Molle

There may be different approaches, e.g.

  1. always request all markers for the given bounds and remove all previously added markers

  2. request only the markers for the given bounds that you haven't got already. Therefore you must collect the markers(e.g. the ID's) that are already drawn within the view and pass this list as parameter to the PHP-script, so that this script may use the list to filter the markers in the Query(Note: you better send the data via POST, otherwise you will reach very fast the limit for the URL-length)

Related to the removing of the markers that are not within the view:
when you really must remove the markers that are out of the view I have no better idea than iterating over all markers and removing(set the map-property to null) the markers that are not within the bounds of the map(may be determined via LatLngBounds.contains())

The other issue with the listener: you better listen for the idle-event of the map

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Google Maps API 3 - Show All Markers on Screen, but Keep Centerpoint

分類Dev

Google Map API V3 - infowindows @ markers on 2 maps

分類Dev

How to delete markers from my own google maps

分類Dev

Google maps API markers content hide by default

分類Dev

Any way I can load KML data from Google maps (again) via JS API?

分類Dev

Get Markers Addresses in Input fields using Drag-able Google Maps API V3

分類Dev

Map markers not rendering - Google Maps Javascript API v3 In Phonegap

分類Dev

How to Add Google Maps with Multiple Markers Showing Infowindows on Load and on Click

分類Dev

Dynamically load Google Maps API

分類Dev

How to remove Pie Charts from Google Maps API V3 on this example?

分類Dev

Setting listeners to groups of markers using Google Maps API

分類Dev

Insert multiple location read from file in Google Maps API

分類Dev

Android: Google Maps API - Change position of maps toolbar

分類Dev

Google Maps Javascript API tilt view differs from the one on www.google.com/maps

分類Dev

ReactJS and Google Maps - Displaying Markers

分類Dev

Google 3D Earth How to find the center point from all the markers and set center view

分類Dev

Get all Google Map v3 markers loaded from GeoJSON

分類Dev

Get word from EditText on current cursor position

分類Dev

From is not valid at this position, expecting : ';' in mysql

分類Dev

Google Maps API 3-onclick URL

分類Dev

Google Maps API 3-onclick URL

分類Dev

How to manage Markers well using google maps api v2 on android

分類Dev

Placing Circles instead of Markers in google maps

分類Dev

Google maps delete all markers and then create new

分類Dev

Google Maps: infobox turns up behind markers?

分類Dev

Google Maps fit markers in custom bounds

分類Dev

Show Markers (from database) if along a Google Directions route

分類Dev

How to apply CSS to Here Maps API Markers

分類Dev

Load routes from api in vue

Related 関連記事

  1. 1

    Google Maps API 3 - Show All Markers on Screen, but Keep Centerpoint

  2. 2

    Google Map API V3 - infowindows @ markers on 2 maps

  3. 3

    How to delete markers from my own google maps

  4. 4

    Google maps API markers content hide by default

  5. 5

    Any way I can load KML data from Google maps (again) via JS API?

  6. 6

    Get Markers Addresses in Input fields using Drag-able Google Maps API V3

  7. 7

    Map markers not rendering - Google Maps Javascript API v3 In Phonegap

  8. 8

    How to Add Google Maps with Multiple Markers Showing Infowindows on Load and on Click

  9. 9

    Dynamically load Google Maps API

  10. 10

    How to remove Pie Charts from Google Maps API V3 on this example?

  11. 11

    Setting listeners to groups of markers using Google Maps API

  12. 12

    Insert multiple location read from file in Google Maps API

  13. 13

    Android: Google Maps API - Change position of maps toolbar

  14. 14

    Google Maps Javascript API tilt view differs from the one on www.google.com/maps

  15. 15

    ReactJS and Google Maps - Displaying Markers

  16. 16

    Google 3D Earth How to find the center point from all the markers and set center view

  17. 17

    Get all Google Map v3 markers loaded from GeoJSON

  18. 18

    Get word from EditText on current cursor position

  19. 19

    From is not valid at this position, expecting : ';' in mysql

  20. 20

    Google Maps API 3-onclick URL

  21. 21

    Google Maps API 3-onclick URL

  22. 22

    How to manage Markers well using google maps api v2 on android

  23. 23

    Placing Circles instead of Markers in google maps

  24. 24

    Google maps delete all markers and then create new

  25. 25

    Google Maps: infobox turns up behind markers?

  26. 26

    Google Maps fit markers in custom bounds

  27. 27

    Show Markers (from database) if along a Google Directions route

  28. 28

    How to apply CSS to Here Maps API Markers

  29. 29

    Load routes from api in vue

ホットタグ

アーカイブ