开发者

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 wi开发者_如何学JAVAndow 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!


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>


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


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜