Add infowindows to markers with labels as they are dropped onto the map?

StackOverflow https://stackoverflow.com/questions/22155960

Question

I have included an example of the working script without the info windows.

I have included an array deliveryContent which will hold the infowindow content. I am struggling with how reference the marker when adding the infowindow.

    <html>
  <head>
    <meta charset="utf-8">
    <title>All delivery locations marker animations with <code>setTimeout()</code></title>
 <style type="text/css">
.labels {
    color: black;
    background-color: white;
    font-family:"Lucida Grande", "Arial", sans-serif;
    font-size: 12px;
     text-align: center;
     width: 30px;
     border: 2px solid black;
     white-space: nowrap;
}


 </style>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
    <script>
// If you're adding a number of markers, you may want to
// drop them on the map consecutively rather than all at once.
// This example shows how to use setTimeout() to space
// your markers' animation.

var store = new google.maps.LatLng(41.2382980, -85.8564200);


var deliveriePoints = [
    new google.maps.LatLng(41.2376780, -85.8562430),
  new google.maps.LatLng(41.2386110, -85.8524380),
  new google.maps.LatLng(41.2396430, -85.8285930),
  new google.maps.LatLng(41.2420040, -85.8062659),
  new google.maps.LatLng(41.2608541, -85.9731375),
  new google.maps.LatLng(41.2373810, -85.8070200),
  new google.maps.LatLng(41.2950700, -85.8276680),
  new google.maps.LatLng(41.2033602, -85.8166853),
  new google.maps.LatLng(41.2485910, -85.8490100),
  new google.maps.LatLng(41.2124700, -85.8837920),
  new google.maps.LatLng(41.2378323, -85.8066285)
];

var deliveryLabels = [
    "1",
  "2",
  "3",
  "4",
  "28",
  "29",
  "30",
  "31",
  "32",
  "33",
  "34"
];

var deliveryContent = [
    "Order 1",
  "Order 2",
  "Order 3",
  "Order 4",
  "Order 28",
  "Order 29",
  "Order 30",
  "Order 31",
  "Order 32",
  "Order 33",
  "Order 34"
];

var markers = [];
var iterator = 0;

var storeimage = {
    url: 'http://google.com/mapfiles/ms/micons/green-dot.png',
    // This marker is 20 pixels wide by 32 pixels tall.
    size: new google.maps.Size(24, 32),
    // The origin for this image is 0,0.
    origin: new google.maps.Point(0,0),
    // The anchor for this image is the base at 0,32.
    anchor: new google.maps.Point(12, 32)
  };

var map;

function initialize() {
  var mapOptions = {
    zoom: 13,
    center: store
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);

var marker = new MarkerWithLabel({
    map: map,
    icon: storeimage,
    position: store,
    labelContent: "Store",
    labelAnchor: new google.maps.Point(16, 39),
    labelClass: "labels",
    labelInBackground: false
  });
  drop();
}

function drop() {
  for (var i = 0; i < deliveriePoints.length; i++) {
    setTimeout(function() {
      addMarker();
    }, i * 200);
  }
}

//function addMarker() {
//  markers.push(new google.maps.Marker({
//    position: deliveries[iterator],
//    map: map,
//    draggable: false,
//    animation: google.maps.Animation.DROP
//  }));
//  iterator++;
//}

function addMarker() {
  markers.push(new MarkerWithLabel({
    map: map,
    position: deliveriePoints[iterator],
    labelContent: deliveryLabels[iterator],
    labelAnchor: new google.maps.Point(16, 39),
    labelClass: "labels",
    labelInBackground: false
  }));
  iterator++;
}


//  var marker = new MarkerWithLabel({
//    map: map,
//    position: GeoCodeLocation,
//    labelContent: checkNumber,
//    labelAnchor: new google.maps.Point(16, 39),
//    labelClass: "labels",
//    labelInBackground: false
//  });




google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

No correct solution

OTHER TIPS

You may store the content for the InfoWindow also as a marker-property.

When the marker has been clicked set the content-property of the InfoWindow to the stored property:

function addMarker() {
 //create a single InfoWindow-instance for all markers
 if(!map.get('infoWin')){map.set('infoWin',new google.maps.InfoWindow());}

  var marker=new MarkerWithLabel({
    map: map,
    //store the content
    infoWinContent:deliveryContent[iterator],
    position: deliveriePoints[iterator],
    labelContent: deliveryLabels[iterator],
    labelAnchor: new google.maps.Point(16, 39),
    labelClass: "labels",
    labelInBackground: false
  });
  markers.push(marker);
  //observe the click
  google.maps.event.addListener(marker,'click',function(){
    this.getMap().get('infoWin').setOptions({
      map:this.getMap(),
      position:this.getPosition(),
      //set the content
      content:this.get('infoWinContent')
    })
  });

  iterator++;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top