📌  相关文章
📜  google place api online example (1)

📅  最后修改于: 2023-12-03 15:15:24.359000             🧑  作者: Mango

Google Places API Online Example

Google Places API is a service that provides information about places using HTTP requests. With Google Places API, you can search for places, get details about a specific place, and more. In this online example, we will learn how to use Google Places API to search for places.

Step 1: Get an API key

To use Google Places API, you need to obtain an API key from the Google Cloud Console. Follow these steps to get an API key:

  1. Go to the Google Cloud Console.
  2. Select your project or create a new one.
  3. Go to the APIs & Services > Credentials page.
  4. Click "Create credentials" and select "API key".
  5. Copy the API key.
Step 2: Set up the HTML page

Create an HTML page with a search box and a map. Here's an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Google Places API Online Example</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  </head>
  <body>
    <input id="search-box" type="text" placeholder="Search for places">
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -33.866, lng: 151.196},
          zoom: 15
        });
        var searchBox = new google.maps.places.SearchBox(document.getElementById('search-box'));
        map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds());
        });
        var markers = [];
        searchBox.addListener('places_changed', function() {
          var places = searchBox.getPlaces();
          if (places.length == 0) {
            return;
          }
          markers.forEach(function(marker) {
            marker.setMap(null);
          });
          markers = [];
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }
            var 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(25, 25)
            };
            markers.push(new google.maps.Marker({
              map: map,
              icon: icon,
              title: place.name,
              position: place.geometry.location
            }));
            if (place.geometry.viewport) {
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });
      }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"></script>
  </body>
</html>

Replace YOUR_API_KEY with your API key obtained in Step 1.

Step 3: Test the example
  1. Open the HTML page in a web browser.
  2. Enter a search term in the search box, for example, "pizza".
  3. Press Enter or click the search button.
  4. The map will be updated with markers for the places that match the search term.
Conclusion

In this online example, we learned how to use Google Places API to search for places. By using Google Places API, you can easily add location-based features to your web applications.