Google Maps Javascript with InfoWindows

Question

I have a javascript file like below that is init in contact us page. I added almost everything that i wanted but could't figure out how to set working info windows for each marker. In facts i understand how to set and use infoWindow but don't know where to put it in this code.

var ContactUs = function () {
    return {
        //main function to initiate the module
        init: function () {
            var neighborhoods = [
              { lat: 41.02688344, lng: 28.97104517, icon: '../Content/blue_MarkerSS.png', content: "a" },
              { lat: 41.07992535, lng: 29.02025431, icon: '../Content/blue_MarkerL.png', content: "b" },
              { lat: 41.059097, lng: 28.983857, icon: '../Content/blue_MarkerB.png', content: "c" },
              { lat: 41.08476948, lng: 28.97748649, icon: '../Content/blue_MarkerK.png', content: "d" },
              { lat: 41.05635465, lng: 28.95114452, icon: '../Content/red_MarkerS.png', content: "e" }
            ];

            var markers = [];
            var map;

            map = new google.maps.Map(document.getElementById("map"), {
                zoom: 12,
                center: { lat: 41.052244, lng: 28.985637 }
            });

            function addMarkerWithTimeout(position, timeout, icon, content) {
                window.setTimeout(function () {
                    markers.push(new google.maps.Marker({
                        position: position,
                        map: map,
                        animation: google.maps.Animation.DROP,
                        icon: icon
                    }));
                }, timeout);
            }

            for (var i = 0; i < neighborhoods.length; i++) {
                addMarkerWithTimeout(neighborhoods[i], i * 300, neighborhoods[i].icon, neighborhoods[i].content);
            }
        }
    };
}();

UPDATE:

I have a working script like that contains infoWindows. I want to add it addMarkerWithTimeout as in first question. Think about merge two scripts that will contain infoWindows and addMarkerWithTimeout in one. My problem is just this.

Original addMarkerWithTimeout Example is HERE (i don't want that button)!

var ContactUs = function () {
    return {
        init: function () {
            var locations = [
              ['a', 41.02688344, 28.97104517, 4, './Content/blue_MarkerSS.png'],
              ['b', 41.07992535, 29.02025431, 5, '../Content/blue_MarkerSS.png'],
              ['c', 41.059097, 28.983857, 3, '../Content/blue_MarkerSS.png'],
              ['d', 41.08476948, 28.97748649, 2, '../Content/blue_MarkerK.png'],
              ['e', 41.05635465, 28.95114452, 1, '../Content/red_MarkerS.png']
            ];

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

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map,
                    icon: locations[i][4]
                });

                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
        }
    };
}();

Answer 1

• keep references to your markers. Instead of:

markers.push(new google.maps.Marker({
                position: position,
                map: map,
                animation: google.maps.Animation.DROP,
                icon: icon
           }));

do:

var marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    animation: google.maps.Animation.DROP,
                    icon: icon
                });
markers.push(marker);

• Then add the click listener to the marker (or you can add it to markers[markers.length-1]...):

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

proof of concept fiddle

code snippet:

var ContactUs = function() {
  return {
    //main function to initiate the module
    init: function() {
      var markers = [];
      var map;
      var infowindow = new google.maps.InfoWindow();
      map = new google.maps.Map(document.getElementById("map"), {
        zoom: 12,
        center: {
          lat: 41.052244,
          lng: 28.985637
        }
      });

      function addMarkerWithTimeout(position, timeout, icon, content) {
        window.setTimeout(function() {
          var marker = new google.maps.Marker({
            position: position,
            map: map,
            animation: google.maps.Animation.DROP,
            icon: icon
          });
          google.maps.event.addListener(marker, 'click', function(e) {
            infowindow.setContent(content);
            infowindow.open(map, marker);
          });
          markers.push(marker);
        }, timeout);
      }

      var neighborhoods = [{
        lat: 41.02688344,
        lng: 28.97104517,
        icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png',
        content: "a"
      }, {
        lat: 41.07992535,
        lng: 29.02025431,
        icon: 'http://maps.google.com/mapfiles/ms/micons/green.png',
        content: "b"
      }, {
        lat: 41.059097,
        lng: 28.983857,
        icon: 'http://maps.google.com/mapfiles/ms/micons/yellow.png',
        content: "c"
      }, {
        lat: 41.08476948,
        lng: 28.97748649,
        icon: 'http://maps.google.com/mapfiles/ms/micons/orange.png',
        content: "d"
      }, {
        lat: 41.05635465,
        lng: 28.95114452,
        icon: 'http://maps.google.com/mapfiles/ms/micons/red.png',
        content: "e"
      }];


      for (var i = 0; i < neighborhoods.length; i++) {
        addMarkerWithTimeout(neighborhoods[i], i * 300, neighborhoods[i].icon, neighborhoods[i].content);
      }
    }
  };
}();
ContactUs.init();

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>

Answer 2

(For your problem and future users)

You can refference yourself at this extremly good website which concerns your issue (google maps v3):

URL: http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/

Also I suggest to visit a popular stackoverflow thread which again deals with your issue (you can also get a better insigth on closures if you don't have one already)

URL: Adding multiple markers with infowindows (Google Maps API)

With this two links and the official google maps web on infowindows

URL: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

you should have no problem whatsoever to solve your problem.

Answer 3

The documentation on this is very good: docs

According to the docs all you need to do is initialize the info window and then add an event handler or however you want to trigger it and call:

infowindow.open(map, marker);

The IIFE you are using would suggest using an event handler would be best. Otherwise you could add an additional closure that triggers the open method and call this whenever and wherever you want.