14

i am implementing a Location Picker like this one: http://m.rhinvivant-lebendigerrhein.eu/geopick.php?raz=1

But when I load the code in my environment the Location Marker is suddenly small and squashed after loading the page (see image1). Then after i dragged the Marker around, it gets even smaller (see image2).

google maps marker too small

Has anyone seen something like this? It would help to get a hint how i can work around this, or what mistake i made.

i.e. How can i fix the size of my markers?

My code looks like this:

var marker = new google.maps.Marker({
    title: settings.gMapMarkerTitle,
    map: map,
    position: defaultLocationLatLng,
    draggable: true
});
4
  • I have no issues with the linked page.
    – Dr.Molle
    Sep 19, 2012 at 12:07
  • 1
    Tried linked page in 3 browsers - no issues. Do you have browser extension installed that could be interfering?
    – user3378
    Sep 19, 2012 at 12:16
  • to clarify, the linked page works also fine for me. i suppose the bug hatches when i include the example code into my project
    – patrics
    Sep 19, 2012 at 13:49
  • 2
    It's hard to answer without any details about your project, but it looks like a CSS-issue. Are there any global formats for e.g. img-elements?
    – Dr.Molle
    Sep 19, 2012 at 21:47

2 Answers 2

21

The Problem was indeed a CSS setting. I am using the zurb foundation framework, which defines max-width for all images.

max-width: 100%;

Fixed it, by adding my own css class to the map div. It overrides the max-width setting and the Markers are back to normal.

<div id="gmap" class="map_canvas" />

.map_canvas img {
    max-width: none; // just in case it does not work... add !important;
}

Thanks Dr. Molle for the Hint...

3
  • You just saved me a lot of time. Thanks for the hint!
    – demogar
    Dec 22, 2012 at 6:08
  • I got stuck on this issue as well while using the foundation framework - thanks for saving me the time! haha!
    – Fruxelot
    Jan 22, 2013 at 13:10
  • Bootstrap had a similar effect, though oddly only on Android vs. iOS & desktop which were fine
    – jolyonruss
    Aug 13, 2013 at 10:10
2

Works without !important, and !important should not be used if it doesn't need to be.

.map_canvas img {
    max-width: none;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.