I am building a web site based on Foundation and I am using Google Maps to display some markers on it.
The problem is that I lose the map control elements from the top left (zoom in and zoom out), and I can't figure out why.
Is there a way to fix this? Here's a screenshot:
I found out the solution and it is quite simple:
#map img
{
max-width : none;
}
Hopefully this helps someone else!
Related
SCREEN SHOT of map with custom markers, infowindows, and styling
Problem :
Having troubling with the google maps API.
I just went to go customize the markers, and edit the pop-up info
window text, and then the icons disappeared for zoom buttons,
streetview, and fullscreen.
Tried Cases :
I tried deleting all the CSS except that
needed to render the map. I tried these CSS tip on what looked like a
similar problem:
Zoom control and streetview not showing on my Google map?
I also tried removing all the code that was used for markers and infowindows. The google buttons still remain blank. They all work (zooming, streetview, and fullscreen), but they are blank which doesn't work for my purposes.
We found we had a box-sizing CSS rule targeting all elements on our site:
* {box-sizing: border-box;}
To solve the icon display issue we added a class that targets all elements inside of google maps to change the box-sizing to content-box.
.gmaps * {box-sizing: content-box;}
This solved the issue for us.
You need to update your version to the below
<script src="https://maps.googleapis.com/maps/api/js?v=quarterly&key=YOUR_API_KEY&callback=initMap"></script>
Along with TFOH's answer, make sure that you remove any max-width from any img tags that appear within the embedded Google map. I had this issue where the Street View icon would not show because I had set images to max-with: 100% so that images remained proportional to their original size.
img {height: auto, max-width: 100%}
.gmaps * {box-sizing: content-box;} .gmaps img {max-width: none;}
Wanna add one more answer because none of existing answers really helped me. Hopefully it can be useful to someone else with a problem like mine.
In my case the problem was in a component I was using to wrap google map's div.
That component had zoom animation, changing the scale prop. That somehow made the map crazy and zoom controls were not visible (were out of the view).
So in my case solution was to remove that animation, which I didn't need anyway. Another solution might be to delay map displaying until animation ends.
Specifically I had this problem with the Ant Design's Popover component where map was displayed in a popup. To solve it you can do this:
<Popover
content={<YourMapComponent />}
transitionName="" // <--- disable transition
>
Hover me
</Popover>
Following problem:
I'm trying to style the print view of a website containing a custom google map.
In the print view and only on Chrome there is a row of tiles missing. This does not happen for all maps on other pages, just certain ones.
I can't seem to figure out why. Any ideas?
Horizontal Cut / Missing tile row
Although this question is quite old I thought I'd post a solution that worked for me in case anyone stumbles upon this question like I have.
Adding a few lines of CSS seems to fix this Google Maps painting issue:
.gm-style div > img {
position: absolute;
}
Thanks to the author of comment 13 on this chromium bug report for offering this solution.
OK, I have scanned the forums trying to find a solution to my dilemma and have tried everything I found. If someone could please take a look at the following URL: angrybullhartford
When I resize any browser, the problems seem to differ a little, The two images in the right sidebar do not center and scale to a tiny size. The slider at the top of the page is small and off center as well. I had this working at one point and cannot get back to it. If it is something simple and someone could tell me why this is occurring I would appreciate it.
Thank you!
There is some sort of left margin or padding on the slider. It does not line up with the elements below it. When you start to make the page smaller, you can really see this margin I'm talking about.
Anyhow, try this: Change your CSS to
#page .pad {
padding: 40px;
background-color: transparent;
}
This produced a much cleaner result for me, not sure if it's exactly what you want though. Being that you're using BS2, you may have to write some media queries to handle your extra styles.
I am a long time silent member of SO. I have always found the answers I needed up to now, hence my very first post! I cannot seem to find a solution to this issue related to twitter bootstrap.
It's a very simple example of google maps integration with the fixed top navbar layout. Everything works as expected on a desktop browser. Whenever I resize the browser window bootstrap switches to mobile layout and the expand/collapse button shows up. That works well except for the fact that my map container breaks as bootstrap seems to add some padding around the map layer. I am a new member and it won't let me attach screenshots, but I hope you get and idea by checking the site URL below. Simpy shrink the browser window and you'll see what I am talking about.
I have tested it on Android emulator as well with same results.
Site URL
Any help would be appreciated! Thanks in advance.
you need to add this to your css
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
}
I saw that it was
.navbar-fixed-top, .navbar-fixed-bottom {
position: static;
}
I have a google map built from the Google Maps API v.3 on a website that I am building. It works fine in all browsers. However, in Safari (for the Mac at least) it is affecting other elements in an odd way. It seems to really only apply to absolutely positioned elements and it may have something to do with z-index. Has anyone had any experience with something like this? What did your solution end up being? Sorry I cannot post a URL yet.
Thanks!!
I ended up finding the solution to my problem. It did indeed have to do with z-index. Interesting that it was only happening in Safari, though. Regardless, if anyone else is noticing something odd going on with Safari and google maps it may have something to do with the z-index of an element on your page. That's where I would start. Thanks again!
The solution that worked for me here (as -webkit-transform:none; stops maps and other functions working on a page), was to ajax in the content via jQuery after load.
Hope that helps!
I'm not completely certain what's going on there since you aren't able to post a sample URL, but if nothing is working after you've tried everything, you can report the issue to the Google Maps API team and they can more thoroughly investigate to see what the issue is.
This is indeed a bug, and is not specifically on Google's end, it has to do with z-indexing getting messed up, whenever you use webkit, or so it seems.
There are two fixes for this, hopefully one of them works.
1. This is the preferred fix. Remove the webkit-transform from the DOM element that you load google maps into and set it's z-index to "auto". Also set it's child div to a z-index of "auto". You can do this with CSS like the following:
#googleMap{
-webkit-transform: none !important;
z-index: auto !important;
> div{
z-index: auto !important;
}
2. Remove the z-index value for every absolutely positioned element on your page that has one (apart from the Google Maps z-indexes), i.e. set z-index for all absolute positioned elements to z-index: auto.
I had experienced the exact same problem as described by the thread starter. In my case the whole navigation disappeared (navigation wrappers seems to be a popular div to mess with in this case, after some research). When I rid the Google Map div from the site the navigation showed up like it should.
Anyway, my solution was to add a direct style to my Google map div:
<div id="map" style="-webkit-transform: none; z-index: 10;"></div>
And that solved my case. Hope it might help someone out there!
Removing the translate globally broke other functionality in our app. It did however point us in the right direction.
This solution worked for us. We moved all the map pin elements back up to the 103 layer.
div[id*='marker_div_']{
-webkit-transform: translateZ(103px);
}
I experienced this same problem in Safari. In my safari it was causing my font on the affected div to become very thin and undefined. The cause I found was that the affected div was casting a shadow onto the div containing google maps. If I remove the drop show the issue is resolved.