JSFiddle - React, Tailwind, and code Playground

by kwilson81

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="map"></div>

CSS

#map{
    width: 450px;
    height: 400px;
}

JavaScript

var mapManager = (function(){

    var map;

    // Public
    var createGoogleMap = function(containerId) {
        var options = {
            zoom: 15,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = buildMap(containerId, options);
        return this;
    };

    var move = function(latitude, longitude) {
        var pos = new google.maps.LatLng(latitude, longitude);
        map.setCenter(pos);
        return this;
    };
    
    // Private
    var buildMap = function(containerId, options) {
        return new google.maps.Map(document.getElementById(containerId), options);
    };
    
    return {
        create: createGoogleMap,
        move: move
    };
    
}());

// Code on page
mapManager.create("map").move(43.650236593550304, -79.35956954956055);