JSFiddle - React, Tailwind, and code Playground

by eddiarnoldo

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<div id="map_canvas" style="width:400px;height:400px;">Google Map</div>

JavaScript

function initialize() {
        var map_options = {
            center: new google.maps.LatLng(35.184950,-89.931230),
            zoom: 2,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

        var info_window = new google.maps.InfoWindow({
            content: 'loading'
        });

        var t = [];
        var x = [];
        var y = [];
        var h = [];

        t.push('Store: 0003');
        x.push(35.184950);
        y.push(-89.931230);
        h.push('Store: 0003 Information 2 Open tickets');

        t.push('Store: 0007');
        x.push(35.035270);
        y.push(-90.023897);
        h.push('Store: 0007 Information 1 Open ticket');
        
        t.push('Store: 0033');
        x.push(35.091607);
        y.push(-92.428163);
        h.push('StoreL 0033 Information 1 Open ticket');

        var i = 0;
        for ( item in t ) {
            var m = new google.maps.Marker({
                map:       google_map,
                animation: google.maps.Animation.BOUNCE,
                title:     t[i],
                position:  new google.maps.LatLng(x[i],y[i]),
                html:      h[i]
            });

            google.maps.event.addListener(m, 'click', function() {
                info_window.setContent(this.html);
                info_window.open(google_map, this);
            });
            i++;
        }
    }

initialize();