google map places

input text to find location

by Osama Qassar

HTML

<link rel="stylesheet" href="https://developers.google.com/maps/documentation/javascript/examples/default.css">
<div id="panel" >
    <input id="searchTextField" type="text" size="50">
    <input type="radio" name="type" id="changetype-all" checked="checked">
    <label for="changetype-all">All</label>
    <input type="radio" name="type" id="changetype-establishment">
    <label for="changetype-establishment">Establishments</label>
    <input type="radio" name="type" id="changetype-geocode" />
    <label for="changetype-geocode"> Geocodes </label>
</div>
<div id="map-canvas"></div>
<!-- <script src="//maps.google.com/maps/api/js?sensor=false&libraries=places"></script> -->
<!-- <script src="//polyfill.io/v3/polyfill.min.js?features=default"></script> -->
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg" ></script>

CSS

input {
  border: 1px solid rgba(0, 0, 0, 0.5);
}

input.notfound {
  border: 2px solid rgba(255, 0, 0, 0.4);
}

#map-canvas,
#map_canvas {
  height: 100%;
  width: 100%;
}

JavaScript

var mapOptions = {
        center: new google.maps.LatLng(41.063641198354766, 28.98277662963935),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    google.maps.event.addListener(map, 'click', function(event) {
       placeMarker(event.latLng);
       geocodeLatLng(map, event.latLng);
    });
    
    var marker;
    var infowindow = new google.maps.InfoWindow();
    function geocodeLatLng(map, location) {
    	const geocoder = new google.maps.Geocoder();
      const latlng = location.toJSON();

      geocoder
        .geocode({ location: latlng })
        .then((response) => {
          if (response.results[0].address_components) {
            //map.setZoom(11);

            /* var marker = new google.maps.Marker({
              position: latlng,
              map: map,
            }); */

            infowindow.setContent(response.results[0].formatted_address);
            infowindow.open(map, marker);
            console.log('bilding no', response.results[0].address_components[0].long_name)// bilding no
            console.log('street', response.results[0].address_components[1].long_name)// street
            console.log('district', response.results[0].address_components[2].long_name)// district
            console.log('area', response.results[0].address_components[3].long_name)// area
            console.log('city', response.results[0].address_components[4].long_name)// city
            console.log('country', response.results[0].address_components[5].long_name)// country
          } else {
            window.alert("No results found");
          }
        })
        .catch((e) => window.alert("Geocoder failed due to: " + e));
    };

    function placeMarker(location) {
        if (marker == null) {
        	marker = new google.maps.Marker({
            position: location,
            map: map
          }); 
        } else {
           ...