JSFiddle - React, Tailwind, and code Playground

by psyne

HTML

<script src="http://maps.google.com/maps/api/js?libraries=places&amp;region=us&amp;language=en&amp;sensor=false&amp;dummy=.js"></script>
<input id="searchTextField" type="text" size="50">             
<div id="map_canvas"></div>

CSS

body {         
    font:14px sans-serif;           
} 
input {
    margin: 0.6em 0.6em 0; 
    width:398px;
}
#map_canvas {         
    height: 400px;         
    width: 400px;         
    margin: 0.6em;       
}

JavaScript

$(function(){     
    var lat = 37.377953,
        lng = -121.987577,
        latlng = new google.maps.LatLng(lat, lng),
        image = 'http://maps.google.com/mapfiles/ms/micons/blue-dot.png'; 
         
    var mapOptions = {           
            center: new google.maps.LatLng(lat, lng),           
            zoom: 13,           
            mapTypeId: google.maps.MapTypeId.ROADMAP         
        },
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
        marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: image
         });
     
    var input = document.getElementById('searchTextField');         
    var autocomplete = new google.maps.places.Autocomplete(input, {
        types: ["geocode"]
    });
    
    //$('#map_canvas').hide();
    
    autocomplete.bindTo('bounds', map); 
    var infowindow = new google.maps.InfoWindow(); 
 
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        infowindow.close();
        var place = autocomplete.getPlace();
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  
        }
        
        moveMarker(place.name, place.geometry.location);
    });  
    
    $("input").focusin(function () {
        $(document).keypress(function (e) {
            if (e.which == 13) {
                 selectFirstResult(); 
                 //$('#map_canvas').show();
            }
        });
    });
    $("input").focusout(function () {
        if(!$(".pac-container").is(":focus") && !$(".pac-container").is(":visible"))
            selectFirstResult();
    });
     
     function selectFirstResult() {
        infowindow.close();
        $(".pac-container").hide();
        var firstResult = $(".pac-container .pac-item:first").text();
        
        var geocoder = new...