I am trying to setup a map using the Places Autocomplete service so I can type an address and plot it on a map. I am using the @googlemaps/js-api-loader npm package to load.

The version when using Loader has a different issue/error for each. I've only seen the Autocomplete kind of work on the alpha version and I am using the example from the Google API docs.

• weekly: I get this error on page load: TypeError: google.maps.places.PlaceAutocompleteElement is not a constructor
• beta: Error when I start typing in the search text field: This API project is not authorized to use this API. Places API error: ApiNotActivatedMapError. I also see this error in the console: Encountered a network request error: PLACES_AUTOCOMPLETE: REQUEST_DENIED: The application is not allowed to use the Place Service.
• alpha: When typing in search, the autocomplete populates with addresses. However when I click on an address, the gmp-placeselect event is never triggered. But it is hitting the API just fine despite what the beta version tells me.

I've also verified that the URL generated by the js-api-loader is the same as the example on this page. They are explicitly using the beta version, but I am getting an API error that it's not enabled. However the fact that it works on the alpha version makes me question that error. But just in case I have included a screenshot of the APIs enabled for the API_KEY I am using here. I also tried it with "Don't restrict key" either. That fails as well. This page also tells me I should be using the beta version, but it's rejecting my API calls saying I haven't enabled the API (screenshot below disagrees).

Code is as follows (vue3):

import { Loader } from '@googlemaps/js-api-loader';

const loader = new Loader({
    apiKey: 'MY_API_KEY',
    version: 'alpha', // weekly, alpha or beta (none work completely)
    libraries: ['places']
});

async function initMap() {
    // Request needed libraries.
    const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
        loader.importLibrary("marker"),
        loader.importLibrary("places"),
    ]);
    // Initialize the map.
    map.value = new google.maps.Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 9,
        mapId: "4504f8b37365c3d0",
        mapTypeControl: false,
    });

    let placeAutocomplete =
        new google.maps.places.PlaceAutocompleteElement({
            componentRestrictions: {country: ['us']},
        });
    placeAutocomplete.id = "pac-input";
    let card = document.getElementById("pac-map");
    card.appendChild(placeAutocomplete);

    placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
        console.log(place);  // NEVER MAKES IT HERE IN ALPHA
    });
}

onMounted(async () => {
    initMap();
});

I am trying to setup a map using the Places Autocomplete service so I can type an address and plot it on a map. I am using the @googlemaps/js-api-loader npm package to load.

The version when using Loader has a different issue/error for each. I've only seen the Autocomplete kind of work on the alpha version and I am using the example from the Google API docs.

• weekly: I get this error on page load: TypeError: google.maps.places.PlaceAutocompleteElement is not a constructor
• beta: Error when I start typing in the search text field: This API project is not authorized to use this API. Places API error: ApiNotActivatedMapError. I also see this error in the console: Encountered a network request error: PLACES_AUTOCOMPLETE: REQUEST_DENIED: The application is not allowed to use the Place Service.
• alpha: When typing in search, the autocomplete populates with addresses. However when I click on an address, the gmp-placeselect event is never triggered. But it is hitting the API just fine despite what the beta version tells me.

I've also verified that the URL generated by the js-api-loader is the same as the example on this page. They are explicitly using the beta version, but I am getting an API error that it's not enabled. However the fact that it works on the alpha version makes me question that error. But just in case I have included a screenshot of the APIs enabled for the API_KEY I am using here. I also tried it with "Don't restrict key" either. That fails as well. This page also tells me I should be using the beta version, but it's rejecting my API calls saying I haven't enabled the API (screenshot below disagrees).

Code is as follows (vue3):

import { Loader } from '@googlemaps/js-api-loader';

const loader = new Loader({
    apiKey: 'MY_API_KEY',
    version: 'alpha', // weekly, alpha or beta (none work completely)
    libraries: ['places']
});

async function initMap() {
    // Request needed libraries.
    const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
        loader.importLibrary("marker"),
        loader.importLibrary("places"),
    ]);
    // Initialize the map.
    map.value = new google.maps.Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 9,
        mapId: "4504f8b37365c3d0",
        mapTypeControl: false,
    });

    let placeAutocomplete =
        new google.maps.places.PlaceAutocompleteElement({
            componentRestrictions: {country: ['us']},
        });
    placeAutocomplete.id = "pac-input";
    let card = document.getElementById("pac-map");
    card.appendChild(placeAutocomplete);

    placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
        console.log(place);  // NEVER MAKES IT HERE IN ALPHA
    });
}

onMounted(async () => {
    initMap();
});

• google-maps-api-3
• vuejs3
• google-places-api

• 4 There seems to be a problem with the api, using the "@react-google-maps/api" package ... also renders the same behavior: stackoverflow/q/79480026/6442090 – 0x00F Commented Mar 4 at 14:42
• 3 This is very sad, Google already deprecated legacy API and we can't use it in production anymore (new keys simply not work with API), and new Places API is totally broken! None of weekly, beta and alpha are working, even when following minimal examples from their website. Google totally broke everything, and restricted to use only one old working version – Ivan Borshchov Commented Mar 5 at 9:55
• 1 Could you please raise an issue in Google Public Issue Tracker? – rafon Commented Mar 6 at 1:46
• 1 @rafon added a ticket here: issuetracker.google/issues/401460263 – Nathan Commented Mar 7 at 14:12
• Same issue. I'm opening a support ticket with Google. – Chad Reitsma Commented Mar 9 at 8:04

2 Answers 2

A couple of things seem to be going on here:

• weekly: the new web-components of the Maps JavaScript API haven't made their way into a stable release (weekly, monthly, quarterly) yet. This includes the PlaceAutocompleteElement, so that isn't available when using the stable channels

• beta: ApiNotActivatedMapError indicates that there is a problem with the API keys and enabled APIs. As we can see, you already enabled the Places API (New), that - to my understanding - should be enough for the new component. However, can you try if it helps when you enable the legacy places API as well?

• alpha: the problem here is that there has been a change regarding the selection event: in the alpha version (as well as in any future stable version) this event is now called gmp-select instead of gmp-placeselect (this is mentioned here in the documentation). This is the recommended way handle the events regardless of the version you're using:

  async function handlePlaceSelected(place) {
    await place.fetchFields({fields: ["displayName", "formattedAddress", "viewport"]});
  
    map.fitBounds(place.viewport);
  }
  
  // beta channel
  pacEl.addEventListener("gmp-placeselect", async (event) =>
    handlePlaceSelected(event.place),
  );
  
  // alpha channel and upcoming stable version
  pacEl.addEventListener("gmp-select", async (event) =>
    handlePlaceSelected(event.placePrediction.toPlace()),
  );
  

As for your code-example:

• the destructuring of the result of Promise.all(...) is wrong. It would have to be:

  const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
    loader.importLibrary("maps"),
    loader.importLibrary("marker"),
    loader.importLibrary("places"),
  ]);
  

  But since you're not even using the values, you could just leave that away:

  await Promise.all([loader.importLibrary("marker"), loader.importLibrary("places")]);
  

According to Google Support, Autocomplete (NEW) Requires BOTH: Places (New) API + Places Legacy to be enabled (who knows why?) -- I was instructed to enable Legacy by going to:

https://console.cloud.google/apis/library/places-backend.googleapis

Once that is enabled, the Autocomplete element worked as expected when using their Sample code: https://developers.google/maps/documentation/javascript/examples/place-autocomplete-element