SOLVED: Map only works w/ longitude/latitude. Doesn't work with addresses

[digitalgravy]

1.5.1

Maps shows up as a grey block when address entered.

[timmse]

Hi Kevin,
Thanks so much for your report!

Did you include the country? This may be required depending on the location.

Best regards,
timmse

[digitalgravy]

Still only shows a grey box after adding the country.

[crsmoore]

Do you have any errors in the Console on the frontend?

I’m getting these 2 errors…

Google Maps JavaScript API warning: InvalidKey

https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key

and…

Google Maps JavaScript API error: InvalidKeyMapError

https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error

Even though I’m using the API key that I got from Google Cloud and it’s valid.

[digitalgravy]

I’m getting this error:

But, my API project is authorized to use the maps javascript api and this API key works on a separate site.

[timmse]

The error says that you have not enabled the Geocoding API, which is necessary for using the address (I just had to read up on it too). So, activate the geocoding API alongside with the Javascript Maps API and it should work.

[digitalgravy]

That works now. Didn’t realize the long/lat would work without geocoding, but addresses don’t.

Can you advise on why a map would completely disappear when setting height to 100%?

[crsmoore]

@timmse - I’m going to test this as well.

Maybe once we all get it working you could add a proper 1, 2, 3 guide in the Academy?

I’m going to test again now.

[tole011]

I’ve just tried with min-height and it works. Height does not…
EDIT: works with min. height set on styles tab.

[digitalgravy]

As soon as I set height or min height to 100% the map disappears.

[crsmoore]

I still wasn’t able to get it to work and sent you a video privately @timmse.

[timmse]

Nice, I’m glad it works now
About the height issue:

SOLVED: Map disappears when you set map height to 100%

Hi Kevin, Thanks so much for your report and sorry for the late reply. If you add a height of 100% to the map, the height is applied to .brxe-map .map. However, .brxe-map (the wrapper of the map) has no height (0px) and accordingly 100% of 0 is also 0. We’ll have to see if we can improve this in one of the following versions. A simple workaround: root { height: 100%; /* so it takes up 100% height of its parent, which needs a fixed height */ /* height: 400px; or set a fixed height, if …

[timmse]

We will soon add a google maps article to the Academy. Here, however, already short and crisp:

For the google Maps integration to work, you need the following from google:

a) A developer account with an activated/assigned billing account
b) A project with the following APIs: Maps Javascript API and Geolocation API
c) An Api Key (restricted or not restricted - it’s up to you)

Getting started with Google Maps Platform  |  Google Developers

Other APIs may be required, but I’d have to test that again myself. However, for displaying and searching the address, the above-mentioned are sufficient.

Best regards,
timmse

[dgento]

This thread still alive - I have slightly different problem, I have entered in LAT and LONG into ACF feild groups and when I try to save the tag it dissapears once I click away from the field:

{acf_latitude}

What have I done wrong to cause this?

[Matej]

Hi @dgento,

I can’t reproduce this issue locally. Can you try disabling all plugins? I remember there was once the same issue (but a different field), and at that time, the issue was with AdvancedThemer, so maybe first check that.

If it’s still happening with all plugins disabled, then please let me know, as I would love to take a look.

Thanks,
Matej