Streaming live at 10am (PST)

Dynamic Google Maps


#1

With the release of the new Dynamics Embed widget on Webflow many new functions are now available through the CMS.

So what are some of the new things we can do?

How about dynamic google maps! We can now use Google maps to show locations of collection items or even directions from point A to Point B .

Lets run through a quick example on how to set this up.

Property Listings

I will be using the Webflow CMS to tell Google how to generate the map so that my visitors can see where my properties are located.

To start I will create a new collection. I tend to use the pre-built collection as much as I can, it’s a real time saver. In this case I’m using the listings collection.

I will be using the default name field to hold my property listing addresses. If your location is a landmark you can use the name field for that location’s proper title and then use a plain text field to hold the street address.

It’s best to create a minimum of three items for the collection before the designing starts.

Now that I have my items created I am going to create a simple three column layout, using a dynamic list, to display my items. For each item an image of the property, the properties address and a button that opens the map for that item is used.

I also make sure to place an embed widget inside the dynamic list so I can use data from the collection in the Google maps code.

Once the embed is in place I head over to Google and get a map API KEY so that I can use their map embeds feature.

https://developers.google.com/maps/documentation/embed/

Click “GET A KEY” and go through Google module to setup your API key.
It’s fairly straight forward from there. Create a new API Key and authorise your published URL and the Webflow Designer to Access the API.

Now I am ready to role.

In my dynamic embed widget I past this code.

<iframe width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen src="https://www.google.com/maps/embed/v1/place?q=Harrods,Brompton%20Rd,%20UK
 &zoom=17
 key=YOUR_API_KEY">
 </iframe>

I replace YOUR_API_KEY with the API Key given to me by Google.

This is the fun part. I Replace Harrods,Brompton%20Rd,%20UK with the dynamic name field in my collection.

There you have it! Every time I create a new property listing the CMS will pull the address information from the name field.

Dynamic Direction maps

What about directing people from one known location to another?
This is really useful for people who are flying in for a corporate event or conference and it’s easy to set up to.

How you setup your collections for this will depend on exactly what you’re trying to achieve.
Let’s say I want to create an annual conference website. Every year there is a new location and directions need to be given.

In this case I would create a collection for the basic conference information; Name, Start and End Dates, and location.

I would also create a collection for likely origins, in this case local airports. In this collection you will want to reference your conference collection so you can use both locations at the same time.

I would then use the same method as above but with slightly different code.

    <iframe width="100%" height="100%" frameborder="0" 
        style="border:0" allowfullscreen src="https://www.google.com/maps/embed/v1/directions?origin=Tate+Modern
          &destination=Tower+of+London
          &key=YOUR_API_KEY">
      </iframe>

Replace Tate+Modern with the dynamic field for the airport locations.

Then replace Tower+of+London with the dynamic field that contains the address of the conference.

This will generate a map with a suggested travel route.

I hope you find this information useful for your project.
If you want to take a look at the site the uses this method I have created a quick site for you.
http://property-listing.webflow.io/

Enjoy :smile:


Can i use Multiple Map Locations with CMS?
Integrating Google Maps with a Dynamic Embed Element & Webflow CMS
Is it possible to include google maps using dynamic CMS
Maps and Zapier
Google Maps API not working
Store Locator Embed
API Key works on Maps component but not on embed custom code
Dynamic Google Maps Issue
Dynamic List to Display Multiple Markers on Custom Google Maps Embed
#2

this is brilliant, thanks for sharing!


#3

Thanks for working on this!!!


#4

Hello @AlexN
And thank you very much for this tutorial. You rock !
For the dynamic direction maps, do you know how to take the address of the user of my website, and then display a google map with the user location and the way to another point, for example.
Don't know if I'm clear enough, but what I need to do is display a map with the user location and the nearest vegetables producers (I have all their location) around him.
Do you know if that is possible ?

Thank you again for your help.
Take care.


#5

Thanks for this @AlexN. I was wondering if it is possible to display all of your listing as marker in the same map? Any thoughts?


#6

Hi @Nando_Azevedo, I would like to be able to do this too, did you ever find a solution?


#7

me too.... i´m wating for this forever :frowning:


#8

You can make maps with multiple points using this - https://mapbuildr.com/buildr

it says it's read only mode - but you can still export code and use it. you need to get a google maps api key also. if you need more info - just ask.


#9

Hi @Diarmuid_Sexton , tks for the help, but for a dynamic solution this is not the best one.
Imagine i have a database (on webflow) of Restaurants, every new restaurant i insert on webflow i will have to go to MapBuildr to insert it.

Just wish i could do this in webflow :frowning:


#10

Most of Webflow's components are not currently user-friendly with CMS. The Webflow staff has mentioned that this will be somewhere on their timeline down the road, but there is no ETA yet. In the meantime, you will have to use a lot of custom code to put together what you need.


#11

@samliew that link is amazing, is the location data coming from the webflow CMS? It's just what I'm researching how to build within webflow (though quite a bit simpler!).

Good to see it 'can' be done inside webflow, I expected to have to spend a lot time with custom code. I don't suppose there could be access via a public link? It's particularly the integration with google maps (eg. clickable pins showing the relevant CMS data in list panel). Little touches like the 'splitter' are really great too.

I'll have a poke around in the source in the meantime! Great work.


#12

@matt50

Nope, this project is not integrated with the CMS, as I will be exporting the code for integration elsewhere. It can definitely be modified to fit the CMS.

This is a private project so you have to hire me to do it.


#13

Thanks for the reply @samliew, all understood. I'm at the stage of figuring out what can be done to meet a client's requirements who want a store/stockist locator. Ideally it would be managed via the webflow CMS so its encouraging to hear you think it would be possible. Great inspiration for me either way. I'll be sure to get in touch if theres an opportunity to to send work your way. Good luck with the project :slight_smile:


#14

Hi Alex,

Thanks for sharing this.

I got this to work sometime ago and am now looking to get it to function with Google Street View.

I tried to achieve this by following the same process as you used for google maps but it's not working...

Question: do you think your process will work with Google Street View as it is or rather some tweaking is needed?

Thanks Alex



#15

Hey @Omar_Melizza

From what I can tell Google Street View API should work in the same way as the example I laid out.
The code is just slightly different.

https://developers.google.com/maps/documentation/streetview/intro

This article should help you out.


#16

Thanks Alex.

What is the exact part that you'd replace with the - e.g. Name - variable to make it dynamic.

Let's take for example the following piece of embedding code:

https://maps.googleapis.com/maps/api/streetview?size=400x400&location=40.720032,-73.988354
&fov=90&heading=235&pitch=10
&key=YOUR_API_KEY

maybe the following?

40.720032,-73.988354 &fov=90&heading=235&pitch=10

I'm kind of stuck.

Cheers


#17

The best thing to do would be to test it out.

According to the article:

"location can be either a text string (such as Chagrin Falls, OH) or a lat/lng value (40.457375,-80.009353). The Google Street View Image API will snap to the panorama photographed closest to this location. Because Street View imagery is periodically refreshed, and photographs may be taken from slightly different positions each time, it's possible that your location may snap to a different panorama when imagery is updated."


#18

Thank Alex. Tried to test it out using static embed first but couldn't even get this to work with that. I'll keep trying and then once I get that to work I'll get stuck into making it dynamic. I'll keep you posted. Thanks for now.


#20

Please do not revive old topics. Create a new discussion if the above posts did not solve your problem.