Google Maps v3: построение различных наборов маркеров

Question

Я пытаюсь построить на карте Google набор фиксированных маркеров и маркер для позиции пользователя. Для этих двух наборов маркеров я хотел бы использовать другое изображение для маркера, однако происходит что-то странное: при загрузке страницы «фиксированные» маркеры отображаются правильно, но затем сразу же исчезает (последний в массиве) и появляется позиция пользователя. Кроме того, первое фиксированное местоположение получает изображение маркера местоположения пользователя, а маркер позиционирования пользователя получает изображение фиксированных маркеров. В идеале местоположения в массиве будут построены полностью (все 4) и с изображением red_dot.png на маркере, а пользователь позиционируется с помощью bluedot_retina.png на маркере.

Это действительно странно, и я изо всех сил пытаюсь понять, что является основной причиной. Оцените любую помощь в этой проблеме. благодаря!

<script> 

     var locations = [ 
      ['location a', 37.60756088, -122.42793323], 
      ['location b', 37.759736, -122.426957], 
      ['location c', 37.752950, -122.438458], 
      ['location d', 37.763128, -122.457942] 
      ]; 
     var map; 
     var i; 
     var marker; 
     var google_lat = 37.757996; 
     var google_long = -122.404479; 
     var myLatlng = new google.maps.LatLng(google_lat, google_long); 

     //google.maps.visualRefresh = true; 

     function initialize() { 

     var mapOptions = { 
      zoom: 12, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 


     var image_dot = new google.maps.MarkerImage(
      'images/red_dot.png', 
      null, // size 
      null, // origin 
      new google.maps.Point(8, 8), // anchor (move to center of marker) 
      new google.maps.Size(8, 8) // scaled size (required for Retina display icon) 
    ); 

     marker = new google.maps.Marker({ 
       flat: true, 
       position: myLatlng, 
       icon: image, 
       optimized: false, 
       map: map, 
       visible: true, 
       title: 'I might be here' 
     }); 

     setMarkers(map, locations); 
     } //initialize(); 


     function setMarkers(map, locations) { 

      for (var i = 0; i < locations.length; i++) { 
      var beach = locations[i]; 
      var myLatLng1 = new google.maps.LatLng(beach[1], beach[2]); 
      marker = new google.maps.Marker({ 
      position: myLatLng1, 
      icon: image_dot, 
      map: map 
      }); 
     } 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

    <script type="text/javascript"> 

     var Tdata; 
     var image = new google.maps.MarkerImage(
      'images/bluedot_retina.png', 
      null, // size 
      null, // origin 
      new google.maps.Point(8, 8), // anchor (move to center of marker) 
      new google.maps.Size(17, 17) // scaled size (required for Retina display icon) 
     ); 
     var userMarker = new google.maps.Marker({icon: image}); 

     //var userMarker = new google.maps.Marker({icon: 'images/bluedot_retina.png'}); 

     $.ajax({ 
       method : "GET", 
       url: "get_location.php", 
       success : function(data){ 
        Tdata=JSON.parse(data); 
        // console.log(data.lat); 
        console.log(Tdata.lat); 
        myFunction(); 
       } 
     }); 

     function myFunction(){ 
       var interval = setInterval(function() { 
        $.get("get_location.php", function(Tdata) { 
         var JsonObject= JSON.parse(Tdata); 
         google_lat = JsonObject.lat; 
         google_long = JsonObject.long; 
         console.log(google_lat, google_long); 
         // $('#data').html('google_lat, google_long'); 
         myLatlng = new google.maps.LatLng(google_lat, google_long); 
         //marker.setPosition(myLatlng); 
         userMarker.setPosition(myLatlng); 
         userMarker.setMap(map); 
         //map.setCenter(myLatlng); 
        }); 
       }, 1000); 
     } 

    </script> 

Answer 1

- глобальная переменная. Вы используете его как для всех ваших местоположений, так и для маркера вашего пользователя. Не делайте этого, назначьте уникальные (или локальные) имена для двух классов маркеров.

var Tdata; 
var userMarker = new google.maps.Marker({icon: URL/to/custom/icon/for/user}); 
$.ajax({ 
    method : "GET", 
    url: "get_location.php", 
    success : function(data){ 
     Tdata=JSON.parse(data); 
     // console.log(data.lat); 
     console.log(Tdata.lat); 
     myFunction(); 
    } 
}); 

function myFunction(){ 
    var interval = setInterval(function() { 
    $.get("get_location.php", function(Tdata) { 
     var JsonObject= JSON.parse(Tdata); 
     google_lat = JsonObject.lat; 
     google_long = JsonObject.long; 
     console.log(google_lat, google_long); 
     // $('#data').html('google_lat, google_long'); 
     myLatlng = new google.maps.LatLng(google_lat, google_long); 
     userMarker.setPosition(myLatlng); 
     userMarker.setMap(map); 
     map.setCenter(myLatlng); 
    }); 
    }, 1000); 
}