Infowindow Help on Google Maps api 3

They had a similar problem, like others, on this website, where only the information on the last marker information window is displayed in all markers. It does not seem to be able to solve this with any of the proposed solutions. In addition, the last of my markers does not display the info window at all.

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="data2.json"></script>
<script type="text/javascript" src="js/markerclusterer.js"></script>

<script type="text/javascript">
  google.load('maps', '3', {
    other_params: 'sensor=false'
  });
  google.setOnLoadCallback(initialize);

  function initialize() {

var center = new google.maps.LatLng(55.4419, -4.1419);

var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 5,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });


var markers = [];
for (var i = 0, dataPhoto; dataPhoto = data.markers[i]; i++) {
      var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude);
      var theTitle = dataPhoto.address;
      var contentString = '<div align="left"><img src="logo.gif" alt="" width="242" height="71" /><br /><br /><p style="color:#000000;">' + data.markers[i].address + '<br />' + dataPhoto.telephone + '</p></div>';



      var infowindow = new google.maps.InfoWindow({
        content: contentString,
        });



    var thisIcon = 'markers/image.png';


                for (var i = 0, marker; marker = markers[i]; i++) {google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,this);});
      } 


      var marker = new google.maps.Marker({
        position: latLng,
        clickable: true,
        title: theTitle,
        icon: thisIcon,
      });

      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);


  }


</script>

Any help is much appreciated!

+2
source share
3 answers

I have not tested this, but it should work. Also note: http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures

<script src="http://www.google.com/jsapi">
</script>
<script type="text/javascript" src="data2.json">
</script>
<script type="text/javascript" src="js/markerclusterer.js">
</script>
<script type="text/javascript">
    google.load('maps', '3', {
        other_params: 'sensor=false'
    });
    google.setOnLoadCallback(initialize);

    function initialize(){

        var center = new google.maps.LatLng(55.4419, -4.1419);

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 5,
            center: center,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });


        var markers = [];
        for (var i = 0, dataPhoto; dataPhoto = data.markers[i]; i++) {
            var latLng = new google.maps.LatLng(dataPhoto.latitude, dataPhoto.longitude);
            var theTitle = dataPhoto.address;
            var contentString = '<div align="left"><img src="logo.gif" alt="" width="242" height="71" /><br /><br /><p style="color:#000000;">' + data.markers[i].address + '<br />' + dataPhoto.telephone + '</p></div>';
            var thisIcon = 'markers/image.png';
            var marker = new google.maps.Marker({
                position: latLng,
                clickable: true,
                title: theTitle,
                icon: thisIcon,
            });

            attachIWindow(contentString, marker);


            markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers);


    }

    function attachIWindow(content, marker){


        var infowindow = new google.maps.InfoWindow({
            content: content,

        });
        google.maps.event.addListener(marker, 'click', function(){
            infowindow.open(map, marker);
        });
    }
</script>
+5
source

,

function AddInfoWidnow(marker,message)
{
     var infowindow = new google.maps.InfoWindow({ content: message });

     google.maps.event.addListener(marker, 'click', function() {

     infowindow.open(marker.get('map'), marker);

    }); 

}

,

+2

If I get it right, please take a look at the closure and try to get them right. Then the magic of javascript will happen!

0
source

Source: https://habr.com/ru/post/1734309/


All Articles