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

// A jsfiddle implementation of Ciul  and totorche mootools Geolocation code
//Google Map Creator [through it's API code]
//www.mooforum.net/scripts12/google-map-creator-t3663.html
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.mapCreate();
    },
   
    mapConfig: function () {
        this.mapOptions = {
            zoom: this.options.zoom,
            center: this.createLatLng(this.options.center.lat, this.options.center.lng),
            mapTypeId: this.options.mapTypeId.toLowerCase()
        };
    },
   
    createLatLng: function (latitude, longitude) {
        latlng = new google.maps.LatLng(latitude, longitude);
        return latlng;
    },
   
    mapCreate: function() {
        this.mapContainer.setStyles({
        width:  this.options.size.width,
        height: this.options.size.height
        });
        this.mapObj = new google.maps.Map(this.mapContainer, this.mapOptions);
    },
   
    // center the map at the given address and zoom on it at the given zoom level
    centerTo: function (address, zoom) {
      var map = this.mapObj;
      var geocoder = new google.maps.Geocoder();
     
      geocoder.geocode( {'address': address, 'language': 'french'}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          map.setZoom(zoom);
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    },
   
    // add a marker on the map at the given address
    addMarker: function(address)...