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

possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Sep 10 '15 at 19:33
If you intend to edit your code then please post a fiddle so it is easier for us to try and solve the problem. — EugenSunic, Sep 10 '15 at 19:51

geocodezip · Accepted Answer · 2015-09-10T22:46:51.150

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>

score 2 · Answer 2 · answered Sep 10 '15 at 19:14

2

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.

answered Sep 10 '15 at 19:14

Justin

885
9
19

I understand how to use infoWindow. Just i don't know where to put it in this code. In fact my question is not about GMaps. It's about Javascript coding. Should i put in in function or for section? Etc. – LacOniC Sep 10 '15 at 19:18
1

I can't figure out where to get markers one by one and add marker.addListener to them. – LacOniC Sep 10 '15 at 19:31
1

Seems like an overly generic question which is much beyond the scope of this forum that I cannot answer without knowing more detail than I care to. If you figure out a more specific question other than where should I copy paste my code - I will be happy to answer it. – Justin Sep 10 '15 at 19:35
Ok, that is a much better question. I will update my answer. – Justin Sep 10 '15 at 19:37
Normally i add something like "var marker = new google.maps.Marker" and use that marker. Here there is no a variable named marker. – LacOniC Sep 10 '15 at 19:42
I will post on this later tonight. – Justin Sep 10 '15 at 19:43

score 1 · Answer 3 · edited May 23 '17 at 12:32

(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.

Google Maps Javascript with InfoWindows

3 Answers3