JSFiddle - React, Tailwind, and code Playground

by mccannf

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<input id="lat" class="text-input form-control" type="text" size="24" name="lat">
<input id="lon" class="text-input form-control" type="text" size="24" name="lon">
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Ă—</button>
                     <h4 class="modal-title">Modal title</h4>

                </div>
                <div class="modal-body">Location:
                    <input type="text" id="us2-address" style="width: 200px" />Radius:
                    <input type="text" id="us2-radius" />
                    <div id="us2" style="height: 400px;"></div>Lat.:
                    <input type="text" id="us2-lat" />Long.:
                    <input type="text" id="us2-lon" />
                </div>
                <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
 <a href="#" class="btn btn-primary" id="save-changes">Save changes</a>

                </div>
            </div>
        </div>
    </div>

JavaScript

var stillPresent = false;
var googleMapsLoaded = false;

function initialize() {
    if (stillPresent == false) {
        $('#us2').locationpicker({
            location: {
                latitude: 46.15242437752303,
                longitude: 2.7470703125
            },
            radius: 300,
            inputBinding: {
                latitudeInput: $('#us2-lat'),
                longitudeInput: $('#us2-lon'),
                radiusInput: $('#us2-radius'),
                locationNameInput: $('#us2-address')
            }
        });
        stillPresent = true;
        $("#save-changes").click(function() {
        $("#lat").val($('#us2-lat').val());
        $("#lon").val($('#us2-lon').val());        
        $('#myModal').modal('hide');
		});
    }
}

function loadScript() {
    if (!googleMapsLoaded) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'http://maps.google.com/maps/api/js?sensor=false&libraries=places&callback=initialize';
        document.body.appendChild(script);
        googleMapsLoaded = true;
    }
}

$(function() {
    $('#myModal').on('shown.bs.modal', function (e) {
        loadScript();
        var map = $('#us2').locationpicker('map').map;
        var currentCenter = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(currentCenter); 
    });
});

// JQuery locationpicker plugin included below:

(function ( $ ) {

    /**
     * Holds google map object and related utility entities.
     * @constructor
     */
    function GMapContext(domElement, options) {
        var _map = new google.maps.Map(domElement, options);
        var _marker = new google.maps.Marker({
            position: new google.maps.LatLng(54.19335, -3.92695),
            map: _map,
            title: "Drag Me",
            draggable: options.draggable
        });
        return {
            map: _map,
            marker: _marker,
            circle: null,
     ...