Menu icon Foundation
Standard Marker in Google Maps too small

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

Maps2

var marker = new google.maps.Marker({
    title: settings.gMapMarkerTitle,
    map: map,
    position: defaultLocationLatLng,
    draggable: true
});
            

         

Google MapsSizeStandard Marker

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

Maps2

var marker = new google.maps.Marker({
    title: settings.gMapMarkerTitle,
    map: map,
    position: defaultLocationLatLng,
    draggable: true
});
            

         
Jeff Simpson about 6 years ago

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 !important;
}