i am implementing a Location Picker like this one: .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).

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
});

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).

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
});

• javascript
• google-maps
• google-maps-markers
• zurb-foundation

• I have no issues with the linked page. – Dr.Molle Commented 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 Commented 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 Commented 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 Commented Sep 19, 2012 at 21:47

2 Answers 2

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...

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

.map_canvas img {
    max-width: none;
}