Streaming live at 10am (PST)

Google Maps Places API


#1

Hi!

This is my first post, so if it’s in the wrong place, sorry in advance!!

I’m looking to somehow pull google maps places data from a cms entry.

The idea being that the CMS entry would be the name of a place, then using the places API, the opening times of that place could be displayed.

Does anyone know if this is possible with webflow?

Cheers!


#2

I would recommend that you add the suburb or address into your CMS item in pieces such as number | street | suburb etc. The code is straight forward using googles normal API embed.
<iframe src=“https://www.google.com/maps/embed/v1/place?q=NUMBER+STREET+SUBURB+STATE+POSTCODE&key=YOURAPIKEYHERE” width=“700” height=“400” frameborder=“0” style=“border:0” allowfullscreen></iframe>
Input the code above into a custom HTML embed element on your CMS template and replace the uppercase text with the corresponding CMS item fields.

Hope it works,
Ben


#3

Thanks for your reply!

I’ve managed to get a maps embed using the maps Api, however I need to just display the opening times using the places api. I think it can be done using javascript, however not quite sure on the specifics.

I need to use the CMS entry name to search for the PlaceID, then take that PlaceID and display the opening time.

Cheers,

Rory


#4

I didn’t see the open times until just then my apologies.

Perhaps you can create a field for the business id from google as well as latitude and longitude then using the code on Google Place Details you can specify what information you would like to show. Dynamically insert the fields from your CMS assuming that each place is a business on google.

Another method is creating a field for the longitude and latitude of each location, the name of each and then the open and close times. I would then use Google Custom Info Window to display the information related to open and close times.

Bit confusing but hope it helps,
Ben


#5

That looks great, thank you.

It was how do you integrate the code that’s on the Google Places API page into Webflow that was stumping me.

Rory


#6

Okey dokey first off I have got it working on a demo site which you can see here due to not adding billing information the map might not load but the marker will and so will the dynamically filled info window.

The preview of the back of house is here

Check out the CMS and the Custom Code in the CMS template to get how I got it all working. As for getting the latitude and longitude you want to use the way google does it so I manually search google maps for the location then from the URL i pull out the lat and lng.

example:
https://www.google.com.au/maps/place/Sydney+Opera+House/@-33.8567844,151.213108,17z/data=!3m1!4b1!4m5!3m4!1s0x6b12ae665e892fdd:0x3133f8d75a1ac251!8m2!3d-33.8567844!4d151.2152967

The first lot of numbers is the lat then after the comma is the lng. Input those into your collection and you should be sweet to go. Google only uses 3 numbers after the decimal so that is all I used in my example so your lat and lng will be:
Latitude: -33.856
Longitude: 151.213

Hope all of that makes sence.
Cheers,
Ben

EDIT: Unfortunately there is no way to dynamically insert information into a CMS collection from JSON. You may be able to load the JSON onto the template page then using JS manipulate the maps to display what you are wanting. Like in the example above how the div has an id of map so that the javascript can run inside of said div.