JSFiddle - React, Tailwind, and code Playground

by salman

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js"></script>
<div id="map_canvas" style="height: 400px;"></div>

JavaScript

var map;
var mgr;

function initialize() {
    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    mgr = new MarkerManager(map);
    google.maps.event.addListener(mgr, 'loaded', function() {
        for (var i = 0; i < 1000; i++) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(Math.random() * 180 - 90, Math.random() * 360 - 180),
                // animation: google.maps.Animation.DROP,
                // animation disabled because it slows down performance
                title: "Random marker #" + i
            });
            mgr.addMarker(marker, 0);
        }
        mgr.refresh();
    });
}
$(document).ready(function() {
    initialize();
});