jarex February 2016

google maps api animation and multiple infowindows

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 mar        

Answers


twernt February 2016

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.


geocodezip February 2016

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 {
          infow 

Post Status

Asked in February 2016
Viewed 2,103 times
Voted 6
Answered 2 times

Search




Leave an answer