Google Map v3 marker click function problem and trigger external link

Question

i am using google map v3 api i would like to show information bubble. For example when i click the marker any marker the function will open the related bubble. On the other hand i would like to trigger all bubble with external link. I tink that marker, 'click', function should be each function. I've tried a lot of example but i didn't work it.

Here is my test addres: http://www.gercekustu.com/test/

Here is my code:

function getGoogleMap(Altitude, Latitude, Address) {
            //var myLatlng = new google.maps.LatLng(Altitude, Latitude, Address);
            var image = 'icon.png';

            var myOptions = {
                zoom: 10,
                center: new google.maps.LatLng(-33.9, 151.2),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);

            var locations = [
                ['Test içeriği5', -33.890542, 151.274856, 5],
                ['Test içeriği4', -33.923036, 151.259052, 4],
                ['Test içeriği3', -34.028249, 151.157507, 3],
                ['Test içeriği2', -33.80010128657071, 151.28747820854187, 2],
                ['Test içeriği1', -33.950198, 151.259302, 1]
            ];

            for (var i = 0; i < locations.length; i++) {
                //var image = new google.maps.MarkerImage('icon' + i + '.png',
                var image = new google.maps.MarkerImage('icon.png',
                new google.maps.Size(40, 34),
                new google.maps.Point(0, 0),
                new google.maps.Point(10, 34));

                var location = locations[i];
                //alert(location[3]);
                var myLatLng = new google.maps.LatLng(location[1], location[2]);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon: image,
                    title: location[0],
                    zIndex: location[3]
                });

                var infowindow = new google.maps.InfoWindow({
                    content: location[0],
                    position: myLatLng
                });

                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.open(map);
                });

            }
            infowindow.open(map);
        }

Thank you for your help

Answer 1

For some reason, all the event listeners were getting the very last marker from the for loop. I think it's a JavaScript thing. You need to use closures in event listeners. Like this:

update: modified code below to also open all info windows when a link is clicked by adding a DOM event listener. The link must have an id="link_id" attribute.

function attachInfoWindow(map, marker) {
  var infowindow = new google.maps.InfoWindow(
      { content: marker.title
      });
  google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
  });
  google.maps.event.addDomListener(document.getElementById('link_id'),'click', function() {
   infowindow.open(map,marker);
  });
}

function getGoogleMap(Altitude, Latitude, Address) {
    //var myLatlng = new google.maps.LatLng(Altitude, Latitude, Address);
    var image = 'icon.png';

    var myOptions = {
        zoom: 10,
        center: new google.maps.LatLng(-33.9, 151.2),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);

    var locations = [
        ['Test içeriği5', -33.890542, 151.274856, 5],
        ['Test içeriği4', -33.923036, 151.259052, 4],
        ['Test içeriği3', -34.028249, 151.157507, 3],
        ['Test içeriği2', -33.80010128657071, 151.28747820854187, 2],
        ['Test içeriği1', -33.950198, 151.259302, 1]
    ];

    for (var i = 0; i < locations.length; i++) {
        //var image = new google.maps.MarkerImage('icon' + i + '.png',
        var image = new google.maps.MarkerImage('icon.png',
        new google.maps.Size(40, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34));

        var location = locations[i];

        //alert(location[3]);
        var myLatLng = new google.maps.LatLng(location[1], location[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            title: location[0],
            zIndex: location[3]
        });
        attachInfoWindow(map, marker);

    }
    //infowindow.open(map);
}

Answer 2

I modified your code, this one works for me:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Map</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

    $(document).ready(function () {
        var map;
        var infowindow;

        getGoogleMap('41.033245', '29.110191', '<div class="mapContainer"><div class="mapContentLeft"><h1>Hotel Name <i>Information/Suggestion</i></h1><div>Hotel Image</div></div><div class="mapContentRight"><div class="mapHotelStars">*****</div><div class="mapHotelAdress">Hotel Adress</div><div class="mapHotelPrice"> Currency + Integer </div></div></div>');

        function getGoogleMap(Altitude, Latitude, Address) {
            var myOptions = {
                zoom: 10,
                center: new google.maps.LatLng(-33.9, 151.2),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            map = new google.maps.Map(document.getElementById("googleMap"), myOptions);

            infowindow = new google.maps.InfoWindow();

            google.maps.event.addListener(map, 'click', function() {
                infowindow.close();
            });

            var locations = [
                ['Test 5', -33.890542, 151.274856, 5],
                ['Test 4', -33.923036, 151.259052, 4],
                ['Test 3', -34.028249, 151.157507, 3],
                ['Test 2', -33.80010128657071, 151.28747820854187, 2],
                ['Test 1', -33.950198, 151.259302, 1]
            ];

            for (var i = 0; i < locations.length; i++) {
                var location = locations[i];
                var title = location[0];
                var latitude = location[1];
                var longitude = location[2];
                displayMarker(title, latitude, longitude);
            }
        }

        function displayMarker(title, latitude, longitude) {

            var latlong = new google.maps.LatLng(latitude, longitude);

            map.setCenter(latlong);

            var marker = new google.maps.Marker({
                map: map,
                title: title,
                icon: "icon.png",
                position: latlong
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(title);
                infowindow.open(map, marker);
            });
        }

    });
</script>
<style type="text/css">
 .googleMapContainer {width:700px; height:500px;}
 .mapContainer {border:1px solid red;}
</style>
</head>
<body>
    <form id="form1">
      <div class="googleMapContainer" id="googleMap"></div>
   </form>
</body>
</html>