Streaming live at 10am (PST)

Dynamic Google Maps & custom details overlay location


#1

Hi,

I have a dynamically generated Google Map here: http://jmak.webflow.io/hotels/cavallo-point-sausalito-california, and I’m wondering if there’s a way to shift the details/directions/save overlay to the right side–or anywhere else on the map.

Here’s the share link, if that helps.
https://preview.webflow.com/preview/jmak?preview=e4013901d4166e213fbaa2834cf57c38

Thank you!


#2

@robtour all i see in your preview it lines of text. but the first link your talking about the box on the left of screen you want to move it to the right?


#3

Yes, sorry–if you click on the top left link, Cavallo Point, the map is down the page, and the overlay is, by default, on the left. I’m using the HTML module with the following code to display the map, using a collection field:

<iframe
width="100%"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place? key=[mykey]
&q=[MAP LOCATION field from collection]" allowfullscreen>

Thanks!


#4

That element class is called Mak-Facts-Block the image attached shows the positioning. the arrow pointing left with with the 0px beside it will align it to the right of the screen if you change the other where it says 1445 to 0 px it will set it to the left side of the screen by moving the arrows or typing values in the box you can position it anywhere.


#5

Oh sorry–I meant inside the Google Map, there’s this overlay… (which goes underneath the overlay you mentioned). Is there any way to move that Google Maps overlay to the right, given the code I’m using above, inserting a Collection item as part of the iframe display code?

Thanks!


#6

@robtour Ok I got it… yes you can. its not difficult this should do what you need…


#7

Thank you–though can that be used the way I’m doing it with collection items? I’m using an iframe Google Map in an HTML embed, and the map location is driven by a field called Map Location in each collection item. I’m not sure how to do that and also move the details overlay.

Thanks!


#8

@robtour yes it can be. copy the css of the bin add it to your css then place the js in your custom script then change class on your iframe to map to match the custom css


#9

Okay, thank you–I didn’t see a way to use collection items to dynamically insert the map location without embedding the map, but I suppose that’s a different question. Thank you!


#10

@robtour Yes that is a bit different. However I have zero knowledge of the cms features in webflow because I write my own programming and databases.