Блог

 "use strict";

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCPJpjD-qcR_yIxJnS8maR5W9KB0E3EzYIamp;libraries=places">
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: -33.8688,
      lng: 151.2195
    },
    zoom: 13
  });
  const card = document.getElementById("pac-card");
  const input = document.getElementById("pac-input");
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
  const request = {
    query: "100 S Broadway Tyler, TX",
    fields: ["name", "geometry"]
  };
  let service = new google.maps.places.PlacesService(map);
  service.findPlaceFromQuery(request, (results, status) => {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      console.log("results.length="   results.length);
      let bounds = new google.maps.LatLngBounds();
      for (let i = 0; i < results.length; i  ) {
        console.log(results[i]);
        let marker = createMarker(results[i]);
        bounds.extend(marker.getPosition())
      }
      console.log(bounds.getCenter().toUrlValue(6));
      google.maps.event.addListenerOnce(map, 'zoom_changed', function() {
        map.setZoom(map.getZoom() - 1);
      })
      map.fitBounds(bounds);
    }
  });


  function createMarker(place) {
    const marker = new google.maps.Marker({
      map,
      position: place.geometry.location
    });
    console.log(place.name   "<br>"   place.formatted_address);
    google.maps.event.addListener(marker, "click", () => {
      infowindow.setContent(place.name);
      infowindow.open(map, marker);
    });
    return marker;
  }
  const autocomplete = new google.maps.places.Autocomplete(input); // Bind the map's bounds (viewport) property to the autocomplete object,
  // so that the autocomplete requests use the current map bounds for the
  // bounds option in the request.

  autocomplete.bindTo("bounds", map); // Set the data fields to return when the user selects a place.

  autocomplete.setFields(["address_components", "geometry", "icon", "name"]);
  const infowindow = new google.maps.InfoWindow();
  const infowindowContent = document.getElementById("infowindow-content");
  infowindow.setContent(infowindowContent);
  const marker = new google.maps.Marker({
    map,
    anchorPoint: new google.maps.Point(0, -29)
  });
  autocomplete.addListener("place_changed", () => {
    infowindow.close();
    marker.setVisible(false);
    const 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.

    marker.setPosition(place.geometry.location);
    marker.setVisible(true);
    let address = "";

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

    infowindowContent.children["place-icon"].src = place.icon;
    infowindowContent.children["place-name"].textContent = place.name;
    infowindowContent.children["place-address"].textContent = address;
    infowindow.open(map, marker);
  }); // Sets a listener on a radio button to change the filter type on Places
  // Autocomplete.

}  

 /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#description {
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
}

#infowindow-content .title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
}

#map #infowindow-content {
  display: inline;
}

.pac-card {
  margin: 10px 10px 0 0;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  font-family: Roboto;
}

#pac-container {
  padding-bottom: 12px;
  margin-right: 12px;
}

.pac-controls {
  display: inline-block;
  padding: 5px 11px;
}

.pac-controls label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}

#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: 400px;
}

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

#title {
  color: #fff;
  background-color: #4d90fe;
  font-size: 25px;
  font-weight: 500;
  padding: 6px 12px;
}  

 <!DOCTYPE html>
<html>

<head>
  <title>Place Autocomplete</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qkamp;callback=initMapamp;libraries=placesamp;v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div class="pac-card" id="pac-card">
    <div>
      <div id="title">
        Autocomplete search
      </div>
    </div>
    <div id="pac-container">
      <input id="pac-input" type="text" placeholder="Enter a location" value="100 Broadway, Tyler, TX " />
    </div>
  </div>
  <div id="map"></div>
  <div id="infowindow-content">
    <img src="" width="16" height="16" id="place-icon" />
    <span id="place-name" class="title"></span><br />
    <span id="place-address"></span>
  </div>
</body>

</html>