JSFiddle - React, Tailwind, and code Playground

by oceog

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="loc">
addr.<input id="text_address" type="text" size="10" value= "Москва, кремль"></div>

<div id="map_canvas"></div>

CSS

html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      table { width: 100%; height: 100% }
      #map_canvas { height: 100% }

JavaScript

var map;
      var geocoder;
      var markers = new Array();
      var firstLoc;

      function myGeocodeFirst() {
        geocoder = new google.maps.Geocoder();

        geocoder.geocode( {'address': document.getElementById("text_address").value },
          function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              firstLoc = results[0].geometry.location;
              map = new google.maps.Map(document.getElementById("map_canvas"),
              {
                center: firstLoc,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
              });
             
            } 
            else {
              document.getElementById("text_status").value = status;
            }
          }
        );
      }
window.onload=myGeocodeFirst;