CODEWITHSUNDEEP
phpjavascriptajaxgoogle-maps-api-3
Jokus
Jokus

Reputation: 473

Google Maps API 3 Load Markers from MySQL from current position

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? :)

Upvotes: 2

Views: 992

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117334

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

Upvotes: 2

Related Questions