JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

CSS

html, body, #map-canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

function setMarkerBack(i) {
        var currentZ = markers[i].get('zIndex');
        markers[i].set('zIndex', currentZ-100000);
    }
var markers = [];

// scoping for jquery
$(document).ready(function () {

    "use strict";

    // variable to hold a map
    var map;

    // variable to hold current active InfoWindow
    var activeInfoWindow;

    // ------------------------------------------------------------------------------- //
    // initialize function      
    // ------------------------------------------------------------------------------- //
    function initialize() {

        // ------------------------------------------------------------------------------- //
        // LISTENER ON CLICK EVENT
        // ------------------------------------------------------------------------------- //
        $("a").on("click", function () {
            alert("got here!");
            // do something to change z-index of this marker
            //...
            // my_index = my_index-1; 
            //...
            return false;
        });

        // map options - lots of options available here 
        var mapOptions = {
            zoom: 5,
            draggable: true,
            center: new google.maps.LatLng(44.960, -93.100),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // create map in div called map-canvas using map options defined above
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        // define two Google Map LatLng objects representing geographic points
        var stPaul = new google.maps.LatLng(44.95283, -93.08925);
        var minneapolis = new google.maps.LatLng(44.97984, -93.26620);

        // place two markers
        fnPlaceMarkers(stPaul, "St Paul");
        fnPlaceMarkers(minneapolis, "Minneapolis");
    }


    // ------------------------------------------------------------------------------- //

    // create markers on the map
    //...