▼
Streaming live at 10am (PST)

Google maps api integration?

#1

Hi guys, i'm using the tool to create a site and it's really amazing.
I'm a c# developer and the design stuff was always a nightmare for me. All the css and divs placement is not for me...this made my life much easier.

I'm trying to add a location using the google maps api and as you can see below the navigation on the left is broken...it might be inheriting the webflow styles. Do you know how can this be fixed?
Thanks for your time and help!

Ale

it should look like this (without the markers):

#2

If it's an iframe there is no way webflow can affect the inner contents. Only the iframe container itself can be styled, this is a global rule of the web when the iframe source is a different domain. But maybe check padding on the container? Also maybe gmaps is doing something based on the size of the container it is detecting I can't recall exactly but I had something similar and I had found some custom statements to add to the gmap script via a web search.

#3

thanks for your help!
i'm using a embedded script. Below is the code.
Only unusual thing is that i had to set the width on the div for the map...otherwise google wouldn't load it

code.png901x742 48 KB

#4

I embedded googlemaps using this method.
1. http://www.embedgooglemap.com/
2. created a section --> container --> embed
2. paste and copy to "embed"

Hope this helps.
Has a different zoom button but it seems to work for me.

#5

Also looks like var options is where you can customize the map, I.e. zoom level, etc. You could try looking up the possible options to see if you can customize the map to further fit your needs.

#6

thanks @vinsuh but i need to set hundreds of markers. The embedded google map works because is inside an iframe. This is not an option for me.
i'll do some reasearch on that pingram.
Thanks you all for your help!

I'll let you know if i find a solution for it!

#7

Do you have a url we can look at to see for ourselves?

#8

Hi Pingram,
yes, sorry for the delay.
http://departaventa.webflow.com/

it should look like this:

the upper left is broken.
thanks for your time!

#9

Can you also provide the script above (its a screenshot that you provided) so I can't copy paste. It will help me test it. You can use something like http://pastebin.com/

#10

here it goes. Also you can look at it by looking at the source code of the published site i sent before.
Thanks again!

http://pastebin.com/BStjY9wm

#11

Yep very strange, dropping in the same code here also displays the zoom controls properly. http://jsfiddle.net/Lhdg2/

Then I tested with a blank webflow site and dragged an embed block into the body, pasted the script along with a div with id of "map" and the zoom controls are also the same as your webflow site. I suspect there is either another script affecting this or some core css like modernizr. This is going to take a little bit more investigating after I export and play with a few things.

#12

found the solution!

add this to your css and the problem is gone:
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }

https://github.com/zurb/foundation/issues/2462

thanks for your time guys

closed #13