How to remove white background in google maps?

P

panaceya2014-08-25 13:59:42

Google

panaceya, 2014-08-25 13:59:42

Hello!

I have a map that should receive markers from the server and show them on the screen. Because marker positions change every minute, then it is necessary to create a drawing of markers without reloading the page.

Everything "works", but:
1. In chrome and similar browsers, the POST request is cached by the browser (markers do not change their location)
2. In all browsers, the map is gradually filled with white, and after 5 minutes only markers on a white background are visible.

The code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&extn=.js"></script>
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
     <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script> 
   <script>
$( document ).ready(function() {		 
  var locations = {}; 
  var latitude = 40.000000,
            longitude = 30.000000,
            radius = 8000,
            center = new google.maps.LatLng(latitude,longitude),
            bounds = new google.maps.Circle({center: center, radius: radius}).getBounds(),
            mapOptions = {
                center: center,
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: true,
            };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
  var infowindow = new google.maps.InfoWindow();	
  var auto_remove = true;//When true, markers for all unreported locs will be removed.
  function setMarkers(locObj) {
    console.log('STM');
    if(auto_remove) {
      //Remove markers for all unreported locs, and the corrsponding locations entry.
      $.each(locations, function(key) {
        if(!locObj[key]) {
          if(locations[key].marker) {
            locations[key].marker.setMap(null);
          }
          delete locations[key];
        }
      });
    }

    $.each(locObj, function(key, loc) {
      if(!locations[key] && loc.lat!==undefined && loc.lng!==undefined) {
        loc.marker = new google.maps.Marker({
          position: new google.maps.LatLng(loc.lat, loc.lng),
          map: map
        });
      google.maps.event.addListener(loc.marker, 'click', (function(key) {
          return function() {
            if(locations[key]) {
              infowindow.setContent(locations[key].info);
              infowindow.open(map, locations[key].marker);
            }
          }
        })(key));

      locations[key] = loc;
      }
      else if(locations[key] && loc.remove) {
        //Remove marker from map
        if(locations[key].marker) {
          locations[key].marker.setMap(null);
        }
        //Remove element from `locations`
        delete locations[key];
      }
      else if(locations[key]) {
        //Update the previous data object with the latest data.
        $.extend(locations[key], loc);
        if(loc.lat!==undefined && loc.lng!==undefined) {
          //Update marker position (maybe not necessary but doesn't hurt).
          locations[key].marker.setPosition(
            new google.maps.LatLng(loc.lat, loc.lng)
          );
        }
        //locations[key].info looks after itself.
      }
    });
  }

  var ajaxObj = {//Object to save cluttering the namespace.
    options: {
      url: "/map.php",//The resource that delivers loc data.
      dataType: "json"//The type of data tp be returned by the server.
    },
    delay:4000,//(milliseconds) the interval between successive gets.
    errorCount: 0,//running total of ajax errors.
    errorThreshold: 5,//the number of ajax errors beyond which the get cycle should cease.
    ticker: null,//setTimeout reference - allows the get cycle to be cancelled with clearTimeout(ajaxObj.ticker);
    get: function() { //a function which initiates 
      if(ajaxObj.errorCount < ajaxObj.errorThreshold) {
        ajaxObj.ticker = setTimeout(getMarkerData, ajaxObj.delay);
      }
    },
    fail: function(jqXHR, textStatus, errorThrown) {
      console.log(errorThrown);
      ajaxObj.errorCount++;
    }
  };
  
  //Ajax master routine
  function getMarkerData() {
    $.ajax(ajaxObj.options)
      .done(setMarkers) //fires when ajax returns successfully
      .fail(ajaxObj.fail) //fires when an ajax error occurs
      .always(ajaxObj.get); //fires after ajax success or ajax error
  }
 
  setInterval(function() {
  
      var json = (function () { 
            var json = null; 
            $.ajax({ 
                'async': false, 
                'global': false, 
                'url': "/map.php", 
                'dataType': "json", 
                'success': function (data) {
                     json = data; 
                 }
            });
            return json;
        })();

        var circle = new google.maps.Circle({
                strokeColor: '#000000',
                strokeOpacity: 0.25,
                strokeWeight: 1.0,
                fillColor: '#ffffff',
                fillOpacity: 0.1,
                clickable: false,
                map: map,
                center: center,
                radius: radius
            });
      
    console.log('logg' + json);
    setMarkers(json);
  }, 10000);
   
});
  </script>
    </head>
  <body>
    <div id="map-canvas" ></div>
  </body>
</html>

maps.php Gives something like this:

[{"lat":41.000000,"lng":31.000000,"info":"test1"},{"lat":42.000000,"lng":32.000000,"info":"test2"}]

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

K

Kirows, 2014-08-26
@panaceya

1) У вас в коде вызова стоит железная привязка к месту для маркера. Либо берите координаты центра вызовом из файла, либо делайте переменные для новых маркеров.
2) Нужно очистить canvas после рефреша или перед ним, чтобы новые отрисовки маркеров не накладывались друг на друга.