-1

Ich habe ein sehr kleines Wissen über Javascript und Google Maps API. Was ich brauche, ist eine Google-Karte, wo ich nach Adresse suchen und auch & Drop-Marker auf Karte ziehen kann, um Lat & lange von diesem Ort zu bekommen. Dieser Code funktioniert gut, es dauert Adresszeile und wenn es eintritt, gibt lat, lang mit Draggable Marker. Was ich eigentlich brauche, ist die automatische Vervollständigung der Suche nach der Adresse. Vielen Dank.Google Maps Autocomplete Suche

<!DOCTYPE html> 
<html lang="nb"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head> 
<body> 

<form> 
    <input type="text" id="user_location" name="user_location" class="register-form__location-holder"> <a href="#" class="button button--small register-wizard__map-search-button">Search adr.</a> 
    <div style="width:100%;height:300px" id="register-form__map" class="register-form__map register-form__map--user"></div> 
    lat: <input name="user_latitude" value="" class="register-form__latitude-holder"> 
    long: <input name="user_longitude" value="" class="register-form__longitude-holder"> 
</form> 

<script> 
    $(document).ready(function(e) { 
     // init map 
     function initMap(lat, long) { 
     var center = new google.maps.LatLng(parseFloat(lat), long); 
     var mapOptions = {center: center, zoom: 16, scrollwheel: false}; 
     map = new google.maps.Map(document.getElementById("register-form__map"), mapOptions); 
     marker = new google.maps.Marker({position: new google.maps.LatLng(lat, long), draggable:true, map: map,title: 'Test'}); 
      google.maps.event.addListener(marker, 'dragend', function (event) { 
       var lat = this.getPosition().lat(); 
       var long = this.getPosition().lng(); 
       initMap(lat, long); 
       $('.register-form__latitude-holder').val(lat); 
       $('.register-form__longitude-holder').val(long); 
      });  
     } 
     /** 
     * Geocode when user location input changes 
     */ 
     $('body').on('change', '.register-form__location-holder', function(e) { 
      var address = $(this).val(); 
      var geocoder = new google.maps.Geocoder(); 
      if (geocoder) { 
       geocoder.geocode({ 'address': address }, function (results, status) { 
        if (status == google.maps.GeocoderStatus.OK) { 
         console.log(results[0].geometry.location); 
         var lat = results[0].geometry.location.lat(); 
         var long = results[0].geometry.location.lng(); 
         console.log("lat="+lat); 

         initMap(lat, long); 
         $('.register-form__latitude-holder').val(lat); 
         $('.register-form__longitude-holder').val(long); 
        } 
        else { 
         alert("Kunne ikke finne denne adressen, vennligst skriv en i nærheten og dra pin'en på kartet nærmest mulig riktig posisjon."); 
         $('.register-form__latitude-holder').focus().select(); 
        } 
       }); 
      } 
     }); 

     var lat = $('.register-form__latitude-holder').val(); 
     var long = $('.register-form__longitude-holder').val(); 
     initMap(lat, long); 

});   

    </script> 


</body> 
</html> 

Antwort

0

function initMap() { 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      center: {lat: -33.8688, lng: 151.2195}, 
 
      zoom: 13 
 
     }); 
 
     var input = /** @type {!HTMLInputElement} */(
 
      document.getElementById('pac-input')); 
 
     document.getElementById('user_latitude').value = -33.8688; 
 
     document.getElementById('user_longitude').value = 151.2195; 
 
     var types = document.getElementById('type-selector'); 
 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(types); 
 

 
     var autocomplete = new google.maps.places.Autocomplete(input); 
 
     autocomplete.bindTo('bounds', map); 
 

 
     var infowindow = new google.maps.InfoWindow(); 
 
     var marker = new google.maps.Marker({ 
 
      position: {lat: -33.8688, lng: 151.2195}, 
 
      title: 'Marker', 
 
      map: map, 
 
      anchorPoint: new google.maps.Point(0, -29), 
 
      draggable: true, 
 
      animation: google.maps.Animation.DROP, 
 
     }); 
 

 
     autocomplete.addListener('place_changed', function() { 
 
      infowindow.close(); 
 
      marker.setVisible(false); 
 

 
      var place = autocomplete.getPlace(); 
 
      if (!place.geometry) { 
 
       // User entered the name of a Place that was not suggested and 
 
       // pressed the Enter key, or the Place Details request failed. 
 
       window.alert("No details available for input: '" + place.name + "'"); 
 
       return; 
 
      } 
 

 
      // If the place has a geometry, then present it on a map. 
 
      if (place.geometry.viewport) { 
 
       map.fitBounds(place.geometry.viewport); 
 
      } else { 
 
       map.setCenter(place.geometry.location); 
 
       map.setZoom(17); // Why 17? Because it looks good. 
 
      } 
 
      marker.setIcon(/** @type {google.maps.Icon} */({ 
 
       url: place.icon, 
 
       size: new google.maps.Size(71, 71), 
 
       origin: new google.maps.Point(0, 0), 
 
       anchor: new google.maps.Point(17, 34), 
 
       scaledSize: new google.maps.Size(35, 35) 
 
      })); 
 

 

 
      var lat=place.geometry.location.lat(); 
 
      var long=place.geometry.location.lng(); 
 

 
      document.getElementById('user_latitude').value = lat; 
 
      document.getElementById('user_longitude').value = long; 
 

 

 
      marker.setPosition(place.geometry.location); 
 
      marker.setVisible(true); 
 

 

 

 
      var address = ''; 
 
      if (place.address_components) { 
 
       address = [ 
 
        (place.address_components[0] && place.address_components[0].short_name || ''), 
 
        (place.address_components[1] && place.address_components[1].short_name || ''), 
 
        (place.address_components[2] && place.address_components[2].short_name || '') 
 
       ].join(' '); 
 
      } 
 

 
      infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); 
 

 
      infowindow.open(map, marker); 
 
     }); 
 

 
     // Sets a listener on a radio button to change the filter type on Places 
 
     // Autocomplete. 
 
     function setupClickListener(id, types) { 
 
      var radioButton = document.getElementById(id); 
 
      radioButton.addEventListener('click', function() { 
 

 
       autocomplete.setTypes(types); 
 
      }); 
 
     } 
 

 
     setupClickListener('changetype-all', []); 
 
     setupClickListener('changetype-address', ['address']); 
 
     setupClickListener('changetype-establishment', ['establishment']); 
 
     setupClickListener('changetype-geocode', ['geocode']); 
 

 

 

 

 
     marker.addListener('drag',entreXY); 
 
     map.addListener('click',deplacerClick); 
 

 
     function entreXY(event) { 
 
      var lat=event.latLng.lat(); 
 
      var long=event.latLng.lng(); 
 
      document.getElementById('user_latitude').value = lat; 
 
      document.getElementById('user_longitude').value = long; 
 
      var ss='X: '+lat+'<br/> Y: '+long; 
 

 
     } 
 

 
     function deplacerClick(event) { 
 
      var lat=event.latLng.lat(); 
 
      var long=event.latLng.lng(); 
 
      marker.setPosition(new google.maps.LatLng(lat, long)); 
 
      document.getElementById('user_latitude').value = lat; 
 
      document.getElementById('user_longitude').value = long; 
 
      var ss='X: '+lat+'<br/> Y: '+long; 
 

 
     } 
 
    }
#map { 
 
      height: 50%; 
 
     } 
 
     /* Optional: Makes the sample page fill the window. */ 
 
     html, body { 
 
      height: 100%; 
 
      margin: 0; 
 
      padding: 0; 
 
     } 
 
     .controls { 
 
      margin-top: 10px; 
 
      border: 1px solid transparent; 
 
      border-radius: 2px 0 0 2px; 
 
      box-sizing: border-box; 
 
      -moz-box-sizing: border-box; 
 
      height: 32px; 
 
      outline: none; 
 
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
 
     } 
 

 
     #pac-input { 
 
      background-color: #fff; 
 
      font-family: Roboto; 
 
      font-size: 15px; 
 
      font-weight: 300; 
 
      margin-left: 12px; 
 
      padding: 0 11px 0 13px; 
 
      text-overflow: ellipsis; 
 
      width: 300px; 
 
     } 
 

 
     #pac-input:focus { 
 
      border-color: #4d90fe; 
 
     } 
 

 
     .pac-container { 
 
      font-family: Roboto; 
 
     } 
 

 
     #type-selector { 
 
      color: #fff; 
 
      background-color: #4d90fe; 
 
      padding: 5px 11px 0px 11px; 
 
     } 
 

 
     #type-selector label { 
 
      font-family: Roboto; 
 
      font-size: 13px; 
 
      font-weight: 300; 
 
     }
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2cxvPQKZNiWZXWEIQXJoCsGYd9ZHuK4Q&libraries=places&callback=initMap" 
 
     async defer></script> 
 
<input id="pac-input" class="controls" type="text" 
 
     placeholder="Enter a location"> 
 
<div id="type-selector" class="controls"> 
 
    <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-address"> 
 
    <label for="changetype-address">Addresses</label> 
 

 
    <input type="radio" name="type" id="changetype-geocode"> 
 
    <label for="changetype-geocode">Geocodes</label> 
 
</div> 
 
<div id="map"></div> 
 
<form> 
 

 
    lat: <input name="user_latitude" id="user_latitude" value="" class="register-form__latitude-holder"> 
 
    long: <input name="user_longitude" id="user_longitude" value="" class="register-form__longitude-holder"> 
 
</form>

SOURCE INSPIRATION

+0

Thanku so viel Sir. –

+1

Willkommen @ShehryarKhan, wenn diese oder jede Antwort Ihre Frage gelöst hat, beachten Sie bitte [akzeptieren] (https://meta.stackexchange.com/q/5234/179419), indem Sie auf das Häkchen klicken. Dies zeigt der breiteren Gemeinschaft, dass Sie eine Lösung gefunden haben und sowohl dem Antworter als auch Ihnen einen guten Ruf verschaffen. Es besteht keine Verpflichtung, dies zu tun. –

Verwandte Themen