> ## Content Index
> Fetch the complete content index at: https://blog.afi.io/llms.txt
> Use this file to discover other available public pages before exploring further.

# Use Place Autocomplete to go anywhere on Google Maps 3D
- URL: https://blog.afi.io/blog/use-place-autocomplete-to-go-anywhere-on-google-maps-3d/
- Published: 2025-04-19T04:02:00.000Z
- Updated: 2026-08-21T05:37:58.000Z
- Description: Using a Google Place Autocomplete search box to zoom to a specific location with the Photorealistic 3D Tiles API.
- Author: Afian Anwar
- Tags: googlemaps

In this quick tutorial, you’ll learn how to use a [Google Place Autocomplete](https://developers.google.com/maps/documentation/places/web-service/place-autocomplete?ref=blog.afi.io) search box to find a location and smoothly zoom (or fly ✈️) to it with the [Photorealistic 3D Tiles API](https://developers.google.com/maps/documentation/tile/3d-tiles?ref=blog.afi.io) \- all with just a few lines of code.

![](https://storage.ghost.io/c/c6/4d/c64da7e8-63a6-4cff-acdc-2782a6ebc377/content/images/2025/04/image-8.png)

Part 1: [What is the Google Photorealistic 3D Tiles API?](https://blog.afi.io/blog/what-is-the-google-photorealistic-3d-tiles-api/)  
Part 2: [How to pan, zoom, and adjust tilt on Google Maps 3D ](https://blog.afi.io/blog/how-to-pan-zoom-and-adjust-tilt-on-google-maps-3d/)  
**Part 3: Use Place Autocomplete to go anywhere on Google Maps 3D (this article)**  
Part 4: [Add map markers, overlays and polylines to Google Maps 3D](https://blog.afi.io/blog/add-map-markers-overlays-and-polylines-to-google-maps-3d/)  
Part 5: [Add a 3D polygon to a Google Photorealistic 3D map](https://blog.afi.io/blog/add-a-3d-polygon-to-a-google-photorealistic-3d-map/)  
Part 6: [Senakw Vancouver on a Photorealistic 3D Map. Will it block your view?](https://blog.afi.io/blog/senakw-vancouver-will-it-block-your-view/)

In the last tutorial, I showed you how to [jump to different preset locations](https://blog.afi.io/blog/how-to-pan-zoom-and-adjust-tilt-on-google-maps-3d/) on a Google Photorealistic 3D Tiles map. In this one, you'll learn how to fly to any location in the world using a [Google Place Autocomplete](https://developers.google.com/maps/documentation/places/web-service/place-autocomplete?ref=blog.afi.io) search box.

### What is Google Place Autocomplete?

[Google Place Autocomplete](https://developers.google.com/maps/documentation/places/web-service/autocomplete?ref=blog.afi.io) is an API that offers location-based suggestions as users type into a search input field. As the user types, an [autocomplete widget](https://developers.google.com/maps/documentation/javascript/place-autocomplete?ref=blog.afi.io#add-autocomplete) displays a dropdown menu with predicted place options.

🌐

If you want to learn more about Google Place Autocomplete, please read [Google address autocomplete with the Places API](https://blog.afi.io/blog/google-address-autocomplete-with-the-places-api/).

When a user selects an option, the coordinates for the selected place are returned and can be used elsewhere in the app. 

### How do you integrate Google Place Autocomplete with the Photorealistic 3D Tiles API?

Adding Google Place Autocomplete to Photorealistic 3D map tiles is no different from adding it to a 2D map.

![](https://storage.ghost.io/c/c6/4d/c64da7e8-63a6-4cff-acdc-2782a6ebc377/content/images/2025/04/image-9.png)

**Import the Google Maps Javascript Library**

First, import the [Places API](https://developers.google.com/maps/documentation/places/web-service/op-overview?ref=blog.afi.io) from the [Google Maps Javascript Library](https://developers.google.com/maps/documentation/javascript/libraries?ref=blog.afi.io#javascript). Add this `<script/>` tag to the `<body/>` of your web page.

```
<script async defer src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&libraries=places&v=alpha&callback=initMap"></script>
```

**Create an Autocomplete widget**

Next, select the HTML element with the class **"search-input"** and initialize the [Google Places Autocomplete widget](https://developers.google.com/maps/documentation/javascript/place-autocomplete?ref=blog.afi.io) on that input field. It turns the input into a search box that suggests locations (places, addresses, etc) as the user types.

```
const input = document.querySelector('.search-input');
const autocomplete = new google.maps.places.Autocomplete(input);

```

**Add an event listener to the autocomplete widget**

After this, add a `place_changed` listener to detect when a new place has been selected from the autocomplete widget, and instruct the map to zoom to the new location by calling the `flyToLocation()` method.

```
autocomplete.addListener('place_changed', () => {
   const place = autocomplete.getPlace();
   if (!place.geometry) return;
   flyToLocation(
      place.formatted_address,
      place.geometry.location.lat(),
      place.geometry.location.lng()
   );
});
```

**Use flyCameraTo to zoom to the selected location**

Inside `flyToLocation`, use the `flyCameraTo()` method to zoom to the selected location. (For a detailed breakdown of how this method works, see my [previous post](https://blog.afi.io/blog/how-to-pan-zoom-and-adjust-tilt-on-google-maps-3d/).) The `endCamera` object defines the destination scene, while `durationMillis` controls how long the camera takes to "fly" from the current view to the target location.

```
async function flyToLocation(label, lat, lng) {
   // Fly to location
   map3DElement.flyCameraTo({
      endCamera: {
         center: {
            lat: lat,
            lng: lng,
            altitude: 10
         },
         range: 1000,
         tilt: 80,
         heading: 315
      },
      durationMillis: 5000
   });
}
```

And that's it! Full working code for the above example can be found in the `google_maps_3d_autocomplete.html` file below.

[google\_maps\_3d\_autocompletegoogle\_maps\_3d\_autocomplete.html4 KBdownload-circle](https://blog.afi.io/content/files/2025/04/google%5Fmaps%5F3d%5Fautocomplete.html "Download")

### What's next?

So far, you've learned how to set up a basic 3D map using [Google Photorealistic 3D Tiles](https://developers.google.com/maps/documentation/tile/3d-tiles?ref=blog.afi.io), use the `flyCameraTo` method to smoothly navigate between locations, and integrate a [Google Place Autocomplete](https://developers.google.com/maps/documentation/places/web-service/place-autocomplete?ref=blog.afi.io) search box to explore any place on Earth in 3D. In the next post, we’ll take it a step further by showing you how to highlight points of interest using markers, overlays, and polylines.

**This article was written by** [**Afi Labs**](https://afi.io/?ref=blog.afi.io)**, a** [**Google Maps Premier Partner**](https://www.afi.io/?ref=blog.afi.io) **and reseller. We build route optimization, navigation, and fleet tracking software on Google Maps, and offer volume pricing on GMP licensing.** [**Talk to an engineer**](https://www.afi.io/contact%5Fus?ref=blog.afi.io) **or** [**follow Afian on LinkedIn**](https://www.linkedin.com/in/afian-anwar/?ref=blog.afi.io)**.**

Next: [Part 4: Adding map markers, overlays and polylines to a Google Maps 3D app](https://blog.afi.io/blog/add-map-markers-overlays-and-polylines-to-google-maps-3d/)