JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>

JavaScript

/*********************************** GoogleMapCreator Class **********************************/

var GoogleMapCreator = new Class({
    
    Implements:    [Options, Events],
    
    options: {
        size: {
            width:    '100%',
            height:    '100%'
        },
        zoom: 6,
        center: {
            lat: 7.6,
            lng: -74
        },
        mapTypeId: 'ROADMAP'
    },
    
    initialize: function (mapContainer, options) {
        this.mapContainer = mapContainer;
        this.setOptions(options);
        this.mapConfig();
        this.createMap();
        this.addListeners();
    },
    
    mapConfig: function () {
        this.mapOptions = {
            zoom: this.options.zoom,
            center: this.createLatLng(this.options.center.lat, this.options.center.lng),
            mapTypeId: this.options.mapTypeId.toLowerCase()
        };
    },
        
    createMap: function() {
        this.mapContainer.setStyles({
            width:    this.options.size.width,
            height:    this.options.size.height
        });
        this.mapObj = new google.maps.Map(this.mapContainer, this.mapOptions);
    },
    
    /**************************************************************
                            API EVENTS
    **************************************************************/
    
    addListeners: function() {
        
        /*
        Connects Google listeners with MooTools class events,
        each one is described later in MAP CLASS->Methods section of this code.
        */
            
        google.maps.event.addListener(this.mapObj,'bounds_changed', function() {
            this.boundsChanged();
        }.bind(this));
        
        google.maps.event.addListener(this.mapObj,'center_changed', function() {
            this.centerChanged();
        }.bind(this));
        
        google.maps.event.addListener(this.mapObj,'click', function() {
            this.click();
        }.bind(this));
        
       ...