Question

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

Answer 1

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…