JSFiddle - React, Tailwind, and code Playground

by Jose Martinez

HTML

<h3>Map 1</h3>
<div id="map1" data-file="test.json" style="width: 200px; height: 200px; "></div>
<h3>Map 2</h3>
<div id="map2" data-file="test2.json" style="width: 200px; height: 200px; "></div>
<!-- JAVASCRIPT -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>

JavaScript

$(function() {
        var sampleMarkerData = [
              {
                "title": "Stockholm",
                "lat": 59.3,
                "lng": 18.1,
                "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
              },
              {
                "title": "Oslo",
                "lat": 59.9,
                "lng": 10.8,
                "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
              },
              {
                "title": "Copenhagen",
                "lat": 55.7,
                "lng": 12.6,
                "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
              }
            ];
        
        var loadAPIPromise;
        // Load API
        var loadAPIShared = function loadAPI(callback) {
            if (!loadAPIPromise) {
                var deferred = $.Deferred();
                console.log('send request to get google maps api');
                $.ajax({
                    url: 'http://www.google.com/jsapi/',
                    dataType: "script",
                    success: function() {
                        google.load('maps', '3', {
                            callback: function() {
                                deferred.resolve();
                            }, 
                            other_params: 'sensor=false'
                        });
                    }
                });
                loadAPIPromise = deferred.promise();
            }
            loadAPIPromise.done(callback);
        };
        
        var googleMaps = function() {
            var $el,
                apiLoaded = false;


            // Init
            //...