JSFiddle - React, Tailwind, and code Playground

by timhuang

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC72eA0akfjiEpSx-hjeicyys36g51dIB4&amp;libraries=geometry&amp;language=zh-TW"></script>
  <div>
    <input id="address" type="textbox" size="25" value="台北市仁愛路四段50號">
    <input type="button" value="Check" onclick="codeAddress()">
    <input id="position" type="textbox" size="25" value="25.0376027,121.5473591">
    <input type="button" value="Check" onclick="addressFind()">    
  </div>

JavaScript

var geocoder= new google.maps.Geocoder();

function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode({
        'address': address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            alert("lat=" + results[0].geometry.location.lat() + ",lng=" + results[0].geometry.location.lng());
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

function addressFind(){
	var position = document.getElementById("position").value;
  geocoder.geocode({
      'location': {lat: 25.0376027, lng: 121.5473591}
  }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            alert("formatted_address=" + results[0].formatted_address);
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });

}