JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<!-- CHECK ELEMENT ID also UPDATE CSS -->
<div id="map_canvas"></div>

CSS

html, body, #map_canvas { margin: 0; padding: 0; height: 100% }

JavaScript

// TESTING ONLY: show how many markers? must be less than 200
var howMany = 200;

// when there are many markers, limit the length of total
// animation: all markers should drop within at most 
// this many seconds
var maxWait = 10; // choose value between 5-15 seconds
// when few markers are shown, the delay between each drop
var maxDelay = 200; // choose value around 200 ms;
// animation runs top to bottom, compares latitude in subarrays
var latitudeSort = function(a, b) {
    return b[1] - a[1]
};

var sitesIcon = 'http://labs.google.com/ridefinder/images/mm_20_red.png';


var infowindow = null;
$(document).ready(function() {
    initialize();
});

function initialize() {
    var centerMap = new google.maps.LatLng(53.2022, -0.707);
    var myOptions = {
        zoom: 7,
        center: centerMap,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: true
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
        setMarkers(map, sites);
    });
    infowindow = new google.maps.InfoWindow({
        content: "loading..."
    });
}




function setMarkers(map, markers) {
    // TESTING ONLY, remove later
    markers.splice(0, 200 - howMany);

    markers.sort(latitudeSort);

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        (function(i, siteLatLng, sites) {
            setTimeout(function() {
                var marker = new google.maps.Marker({
                    position: siteLatLng,
                    map: map,
                    title: sites[0],
                    zIndex: sites[3],
                    html: sites[4],
                    icon: sitesIcon,
                    animation: google.maps.Animation.DROP
                });

                var contentString = "Some content";
               ...