A work colleague, Brad Rice, and his wife are working on a video and needed to capture a Google Maps animated pin drop. I’ve done this a couple of times, and dug the code out to share with him. Since this code does a couple of other things, I thought I’d share.
<?= $jsBuildingArray; ?>
var myOptions =
center: new google.maps.LatLng(41.07663853500103, -81.51131740766186),
var map = new google.maps.Map(document.getElementById("googleMap"),myOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i in arrBuildingBasedTickets)
marker = new google.maps.Marker(
position: new google.maps.LatLng(arrBuildingBasedTickets[i], arrBuildingBasedTickets[i]),
google.maps.event.addListener(marker, 'click', (function(marker, i)
infowindow.setContent(arrBuildingBasedTickets[i]+" tickets = "+arrBuildingBasedTickets[i]);
arrBuildingBasedTickets = new Array(
['College of Arts and Sciences',41.07774578109146,-81.51071727275848,13],
['McDowell Law Center',41.07738992586513,-81.51589930057526,5],
['Schrank Hall (North)',41.07508086389763,-81.51375889778137,17],
- On #15 we iterate over the arrBuildingBasedTickets to build up Google Maps infowindow content and place markers.
- On #24 we bind a mouse click event listener to each marker to open an infowindow on a mouse click
- On #28 we populate the info window with dynamic content from the arrBuildingBasedTickets array.
Instead of hitting me up with questions/comments via email, Facebook or Twitter, please leave responses below to help future visitors who may share your perspective.