JSFiddle - React, Tailwind, and code Playground

by mwflipper

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true&amp;libraries=places"></script>
<h3>Koordinaten:</h3>
<table border="0">
    <tr>
        <td>Dezimalminuten:</td>
        <td><input id="coorsDecimal" type="text" size="30"/></td>
    </tr>
    <tr>
        <td>Eingabe Urwigo:</td>
        <td id="coorsUrwigo">&nbsp;</td>
    </tr>
    <tr>
        <td>Zonepoint in lua:</td>
        <td id="coorsZonepoint">&nbsp;</td>
    </tr>
</table>

  <input id="pac-input" class="controls" type="text" size="70" placeholder="Search Box">
<div id="map-canvas"></div>
//50.6489339390577N 7.45647191572806E
//Wherigo.ZonePoint(50.3691166666667, 7.6164, 0)

CSS

html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

JavaScript

var map;
var myZoom = 16;
var fixedRound = 7;
function initializeSearchBox() {

  var markers = [];
  map = new google.maps.Map(document.getElementById('map-canvas'), {
         mapTypeId: google.maps.MapTypeId.HYBRID,
  });

  var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(50.00, 7.270),
      new google.maps.LatLng(51.0, 7.631));
  map.fitBounds(defaultBounds);
  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,                                 position.coords.longitude);           
        
      map.setCenter(pos);  
      map.setZoom(myZoom);
    }, function() {
      handleNoGeolocation(true);
    });
  } else{
      alert("Kann aktuelle Position nicht ermitteln. Bitte über Suchfeld die gewünschte Adresse eingeben")
  }

  // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));

  // [START region_getplaces]
  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }
    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17,...