CODEWITHSUNDEEP
javascriptgoogle-mapsinfowindow
Cathy
Cathy

Reputation: 43

Infowindow help on google maps api 3

Having similar problem as others have had on this website where it shows only the last marker's info window info in all markers. Can't seem to solve this with any of the solutions given. Also, the last one of my markers doesn't show an 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 much appreciated!

Upvotes: 2

Views: 2168

Answers (3)

Durai Amuthan.H
Durai Amuthan.H

Reputation: 32320

We can make use of closures to solve this problem

Use the below code snippet to add info window to marker

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

    }); 

}

To see a working sample refer here

Upvotes: 2

Michal
Michal

Reputation: 13649

I have not tested this but it should work - also please have a look at : 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>

Upvotes: 5

Argiropoulos Stavros
Argiropoulos Stavros

Reputation: 9533

If I get this right then please take a look at closures and try to understand them properly.Then javascript magic will happen!

Upvotes: 0

Related Questions