samedi 27 juin 2015

Google Maps v3: plot different sets of markers

I am trying to plot on a google map a set of fixed markers and a marker for the user position. For these two sets of markers I would like to use a different image for the marker, however something weird is happening: when loading the page, the "fixed" markers get plotted properly but then immediately one disappears (the last one in the array) and then the user position shows up. In addition, the first fixed location gets the user location marker image, and the user positioning marker gets the image of the fixed markers. Ideally, the locations in the array will be plotted entirely (all 4) and with red_dot.png image on the marker, and the user positioning with the bluedot_retina.png on the marker.

It's really strange and I am struggling figuring out what is the root cause. Appreciate any help with this issue. thanks!

<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 = 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)
       );

        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();

      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)
      );

      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;

        $.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);
                        map.setCenter(myLatlng);
                    });
                }, 1000);
        }

</script>

Aucun commentaire:

Enregistrer un commentaire