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!
@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?
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!
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.
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!
@robtour Ok I got it… yes you can. its not difficult this should do what you need…
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!
@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
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!
@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.
Hi, @robtour!
Your question is very interesting and I might have an answer for you.
For your website it would be great to use Google Maps widget by Elfsight.
You want to move the details/directions/save options to the other side of the map, right? With our widget, you can achieve this in a slightly different way.
I suggest you to use markers instead of details/directions/save overlay. Marker will contain all this in one place; to see the information, the visitor of your site will need just to click on it. You can see the example in the picture below.
In addition, you can try out our widget yourself here.
Also we’ve got many tips such as hide or show the Location List, show several locations in one list, change Google Maps layers, automatic route building from the visitor’s location and others. In addition you can change map colors and layouts to make your site look perfect!
Hope I’ve helped you! If you have any questions, I’m here to answer.
It would be great to receive feedback from you.
