JSFiddle - React, Tailwind, and code Playground

by K.J Ye

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="map_canvas"></div>

CSS

#map_canvas{
    width: 400px;
    height: 400px;
}

JavaScript

/* CASE SOLVED
* Attempt to catch google.maps exceptions
* VIA javascript
* 9-9-2010
* Specified Error is:
*
* Uncaught Error: Invalid value for property <address>:
*/

try {
    var zipcode = 00000; //input number will clash with google.maps.Geocoder().geocode's address field which requires a string.
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 5,
        center: new google.maps.LatLng(35.137879, -82.836914),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var geo = new google.maps.Geocoder().geocode({
        'address': zipcode
    }, function(geoResult, geoStatus) {
        if (geoStatus != google.maps.GeocoderStatus.OK) console.log(geoStatus);
    });
} catch (e) {
    alert(e);
}

/*
* Answer is that try catch does
* not work with async callback
* due to different scope
*/