JSFiddle - React, Tailwind, and code Playground

by JakubSkowronski

HTML

<div style="margin:10px;" class="gmap" data-address="New York" data-lang="auto" data-width="350px" data-height="150px" data-zoom="12" data-bubble="false" data-pin-size="1" data-output="iframe"></div>

JavaScript

var scripts = document.getElementsByTagName('script');
var thisScript = scripts[scripts.length - 1];
var proxyUrl = thisScript.src.replace(/\/script\.js$/, '/').split('/');
proxyUrl.pop();
proxyUrl = proxyUrl.join('/') + '/';
(function($) {
  $.fn.googleMaps = function() {
    var protocol = 'http:';
    if (document.location.protocol === 'https:') {
      protocol = 'https:'
    }
    return this.each(function() {
      var gmap = $(this),
        debug = false,
        output = 'iframe',
        description = '',
        language, width, height, type, bubble, pin_color, zoom = 10,
        out = '',
        addr = '',
        ll = '';
      if (!gmap.data('address') || gmap.data('address').length < 4) {
        return
      }
      if (String(gmap.data('debug')) === '1' || String(gmap.data('debug')).toLowerCase() === 'true') {
        debug = true
      }
      if (String(gmap.data('output')).toLowerCase() === 'img' || String(gmap.data('output')).toLowerCase() === 'image') {
        output = 'image'
      } else {
        output = 'iframe'
      }
      zoom = parseInt(gmap.data('zoom'), 10);
      if (isNaN(zoom) || zoom < 0 || zoom > 21) {
        zoom = 10
      }
      if (!gmap.data('lang') || String(gmap.data('lang')).toLowerCase() === 'auto') {
        language = window.navigator.userLanguage || window.navigator.language
      } else {
        language = $.trim(gmap.data('lang'))
      }
      if (output === 'image') {
        width = parseInt(gmap.data('width'), 10);
        if (isNaN(width) || width < 10 || width > 3000) {
          width = 500
        }
        height = parseInt(gmap.data('height'), 10);
        if (isNaN(height) || height < 10 || height > 2000) {
          height = 300
        }
        switch (String(gmap.data('type')).toLowerCase()) {
          case 'road':
          case 'roadmap':
            type = 'roadmap';
            break;
          case 'satellite':
          case 'sat':
            type = 'satellite';
            break;
  ...