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="googleMap" class="map"></div>
<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div id="info"></div>

CSS

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

JavaScript

var MapInitialized = false,
    $map = $('#googleMap');

var mapProp = {
    center: new google.maps.LatLng(35.6891970, 51.3889740),
    zoom: 12,
    disableDefaultUI: true,
    zoomControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    animation: google.maps.Animation.DROP,
    mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'bestfromgoogle']
    }
};
var map = new google.maps.Map($map[0], mapProp);
var markers = [];
var infoWindow = new google.maps.InfoWindow();
var idx = 0;
$("select").change(function () {
    for (var i=0; i<markers.length; i++) {
        markers[i].setMap(null);
    }
    markers = [];
    /* $.ajax({
        type: "GET",
        url: "places.json",
        dataType: "json",
        beforeSend: function () {
            $(".mapLoading").fadeIn();
        },
        complete: function () {
            $(".mapLoading").fadeOut();
        },
        success: function (response) { */
    document.getElementById('info').innerHTML = "idx=" + idx;
    if (idx == 0) response = jsonData0;
    else response = jsonData1;
    idx += 1;
    idx = idx % 2;
    var bounds = new google.maps.LatLngBounds();

    $.each(response, function (key, data) {

        Point = new google.maps.LatLng(data.lat, data.lng);
        bounds.extend(Point);

        createMarker(Point, data);

    });


    map.fitBounds(bounds);

    //    }
    // });
    });

function createMarker(Point, data) {
    var marker = new google.maps.Marker({
        position: Point,
        map: map,
        title: data.title
    });

    google.maps.event.addListener(marker, 'click', function () {
        infoWindow.setContent(this.getTitle() + "<br>" + this.getPosition());
        infoWindow.open(map, this);
    });
    markers.push(marker);
}


var jsonData0 = [{
    "id": "1",
        "title": "Stockholm",
        "lat": 59.3,
        "lng": 18.1,
}, {
    "id": "2",
        "title": "Oslo",
        "lat": 59.9,
        "lng":...