google maps api animation and multiple infowindows

Question

I'm trying get map with dropdown markers (every with infowindow). Multiple markers must start with HTML/CSS button. Infowindows should have different text. I can't build even with the same text in every infowindows. In console browser I see message: "SCRIPT445: Object doesn't support this action". I can't trigger Infowidow at all. My code /used from Google examples/ is below:

 <!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8">
        <title>Marker animations with <code>setTimeout()</code></title>
        <style>
              html, body {
                height: 100%;
                margin: 0;
                padding: 0;
              }
              #map {
                height: 100%;
              }
        #floating-panel {
          position: absolute;
          top: 10px;
          left: 25%;
          z-index: 5;
          background-color: #fff;
          padding: 5px;
          border: 1px solid #999;
          text-align: center;
          font-family: 'Roboto','sans-serif';
          line-height: 30px;
          padding-left: 10px;
        }

              #floating-panel {
                margin-left: -52px;
              }
            </style>
          </head>
          <body>
            <div id="floating-panel">
              <button id="drop" onclick="drop()">Drop Markers</button>
             </div>
            <div id="map"></div>
            <script  async defer
        src=         "https://maps.googleapis.com/maps/api/jssigned_in=true&libraries=places&callback=initMap">
         </script>
        <script>
        var neighborhoods = [
          {lat: 52.511, lng: 13.447, name: "2007"},
          {lat: 52.549, lng: 13.422, name: "2008"}, 
          {lat: 52.497, lng: 13.396, name: "2009"},
          {lat: 52.517, lng: 13.394, name: "2010"}
        ];

        var markers = [];
        var map;

        function initMap() {
          map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: {lat: 52.520, lng: 13.410}
          });
        }


        function drop() {
          clearMarkers();
          for (var i = 0; i < neighborhoods.length; i++) {
            addMarkerWithTimeout(neighborhoods[i], i * 200);
          }
        }
        var contentString = '<div id="content">'+
              '<div id="siteNotice">'+
              '</div>'+
              '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
              '<div id="bodyContent">'+
              '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
              'sandstone rock formation in the southern part of the '+
              'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
              'south west of the nearest large town, Alice Springs; 450&#160;km '+
              '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
              'features of the Uluru - Kata Tjuta National Park. Uluru is '+
              'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
              'Aboriginal people of the area. It has many springs, waterholes, '+
              'rock caves and ancient paintings. Uluru is listed as a World '+
              'Heritage Site.</p>'+
              '<p>Attribution: Uluru, <a            href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
              'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
              '(last visited June 22, 2009).</p>'+
              '</div>'+
              '</div>';

        function addMarkerWithTimeout(position, timeout) {
          window.setTimeout(function() {
            var data = position;
            var marker = new google.maps.Marker({
              position: position,
              map: map,
              title: data.name,
              animation: google.maps.Animation.DROP
            });
             markers.push(marker);
            var infowindow = new google.maps.infowindowInfo({
                content: contentString,   
            });
            google.maps.event.addListener(marker, function() {
                if (this.getMap()) {
                  infowindow.open(this.getMap(), this);
                } else {
                  infowindow.close()
                }
              });
          }, timeout);
        }


        function clearMarkers() {
          for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(null);
          }
          markers = [];
        }

        google.maps.event.addDomListener(window, 'load', initMap);
        </script>
          </body>
        </html

To start with, I get a javascript error with your code `Uncaught TypeError: google.maps.infowindowInfo is not a function`. Javascript is case sensitive, that should be `google.maps.InfoWindow` — geocodezip, Feb 08 '16 at 15:02
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, Feb 08 '16 at 15:03
http://stackoverflow.com/questions/11425475/settimeout-marker-animation-nothing-seems-to-work look here — Mehmet, Feb 08 '16 at 15:03

score 0 · Answer 1 · answered Feb 08 '16 at 15:40

0

You just have two minor typos.

In your script tag. There should be a ? between js and signed_in in the URL:

<script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=places&callback=initMap">

Then, at the end of your code example, your html tag is missing the closing >.

If you fix these two issues, your map will load.

answered Feb 08 '16 at 15:40

twernt

20,271
5
32
41

Thx for Your help and comments. Map is loading, but infowindows still don't work. – jarex Feb 08 '16 at 17:16

geocodezip · Accepted Answer · 2021-11-30T11:11:51.120

Simplest solution, pass the desired HTML in to the addMarkersWithTimeout function and use function closure (like is done in the answer to Google Maps JS API v3 - Simple Multiple Marker Example) to associate the marker's content with the click event listener for that marker:

function addMarkerWithTimeout(position, html, timeout) {
  window.setTimeout(function() {
    var data = position;
    var marker = new google.maps.Marker({
      position: position,
      map: map,
      title: data.name,
      animation: google.maps.Animation.DROP
    });
    markers.push(marker);
    var infowindow = new google.maps.InfoWindow({
      content: html,
    });
    google.maps.event.addListener(marker, 'click', (function(marker, html) {
      return function() {
        if (this.getMap()) {
          infowindow.open(this.getMap(), this);
        } else {
          infowindow.close()
        }
      }
    })(marker, html));
  }, timeout);
}

proof of concept fiddle

code snippet:

function addMarkerWithTimeout(position, html, timeout) {
  window.setTimeout(function() {
    var data = position;
    var marker = new google.maps.Marker({
      position: position,
      map: map,
      title: data.name,
      animation: google.maps.Animation.DROP
    });
    markers.push(marker);
    var infowindow = new google.maps.InfoWindow({
      content: html,
    });
    google.maps.event.addListener(marker, 'click', (function(marker, html) {
      return function() {
        if (this.getMap()) {
          infowindow.open(this.getMap(), this);
        } else {
          infowindow.close()
        }
      }
    })(marker, html));
  }, timeout);
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {
      lat: 52.520,
      lng: 13.410
    }
  });
}


function drop() {
  clearMarkers();
  for (var i = 0; i < neighborhoods.length; i++) {
    if (i == 0) {
      html = contentString
    } else {
      html = "html " + i
    }
    addMarkerWithTimeout(neighborhoods[i], html, i * 200);
  }
}
var contentString = '<div id="content">' +
  '<div id="siteNotice">' +
  '</div>' +
  '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
  '<div id="bodyContent">' +
  '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
  'sandstone rock formation in the southern part of the ' +
  'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) ' +
  'south west of the nearest large town, Alice Springs; 450&#160;km ' +
  '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major ' +
  'features of the Uluru - Kata Tjuta National Park. Uluru is ' +
  'sacred to the Pitjantjatjara and Yankunytjatjara, the ' +
  'Aboriginal people of the area. It has many springs, waterholes, ' +
  'rock caves and ancient paintings. Uluru is listed as a World ' +
  'Heritage Site.</p>' +
  '<p>Attribution: Uluru, <a            href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
  'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' +
  '(last visited June 22, 2009).</p>' +
  '</div>' +
  '</div>';


function clearMarkers() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
}
var neighborhoods = [{
  lat: 52.511,
  lng: 13.447,
  name: "2007"
}, {
  lat: 52.549,
  lng: 13.422,
  name: "2008"
}, {
  lat: 52.497,
  lng: 13.396,
  name: "2009"
}, {
  lat: 52.517,
  lng: 13.394,
  name: "2010"
}];

var markers = [];
var map;
google.maps.event.addDomListener(window, 'load', initMap);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  margin-left: -52px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="floating-panel">
  <button id="drop" onclick="drop()">Drop Markers</button>
</div>
<div id="map"></div>

google maps api animation and multiple infowindows

2 Answers2