google maps marker strangely stretched issue

Question

I am experiencing a strange behavior of google maps (see attached image) does anyone know how that could come? Has anyone experienced that before?

after dragging close code below

<script>
<!--
    var map_geolocation;

    function savePosition_geolocation(point)
    {
        var input = document.getElementById("id_geolocation");
        input.value = point.lat().toFixed(6) + "," + point.lng().toFixed(6);
        map_geolocation.panTo(point);
    }

    function load_geolocation() {
        var point = new google.maps.LatLng(50.728632, 9.111587);

        var options = {
            zoom: 13,
            center: point,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            // mapTypeControl: true,
            // navigationControl: true
        };

        map_geolocation = new google.maps.Map(document.getElementById("map_geolocation"), options);

        var marker = new google.maps.Marker({
                map: map_geolocation,
                position: new google.maps.LatLng(50.728632, 9.111587),
                draggable: true

        });
        google.maps.event.addListener(marker, 'dragend', function(mouseEvent) {
            savePosition_geolocation(mouseEvent.latLng);
        });

        google.maps.event.addListener(map_geolocation, 'click', function(mouseEvent){
            marker.setPosition(mouseEvent.latLng);
            savePosition_geolocation(mouseEvent.latLng);
        });

    }

    $(function() {
        load_geolocation();
    });

//-->
</script>
        <input type="hidden" name="geolocation" value="50.728632,9.111587" id="id_geolocation" /><div id="map_geolocation" style="width: 400px; height: 300px"></div>

i noticed when i remove draggable from MarkerOptions it looks normal — niklas, May 30 '12 at 18:10

score 15 · Accepted Answer · answered May 30 '12 at 17:55

15

I've seen various forms of stretched tiles and distorted controls, but this is the first time I see stretched markers and shadows. If we're lucky, adding these lines to your CSS or styles will unstretch the map and markers.

 #map_geolocation label { width: auto; display:inline; }
 #map_geolocation img { max-height: none; max-width: none; }

I tried your attached code and it looks OK the way it is.

answered May 30 '12 at 17:55

Heitor Chang

6,038
2
45
65

This helped unstretch the pan and zoom controls when I was building a responsive map. Cheers! – Ben E G Feb 17 '14 at 05:02

score 9 · Answer 2 · answered Jun 07 '12 at 16:30

9

Are you using twitter bootstrap? If so, try to add the following stylesheet.

div#map_geolocation img {
  max-width:none;
}

answered Jun 07 '12 at 16:30

bakabona

91
1

Yeah, this worked like a charm! Forgot that TB messes with the img widths. – radu.luchian Jun 10 '13 at 08:59

score 0 · Answer 3 · answered Jan 11 '19 at 04:34

0

For those of you having this issue on the newer version (v3.33+) 2018-2019 of Google Maps JavaScript API. I recommend checking this post: https://stackoverflow.com/a/54140395/8658147 as well.

answered Jan 11 '19 at 04:34

jumper

31
3

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. [Answers that are little more than a link may be deleted.](https://stackoverflow.com/help/deleted-answers) – Rumit Patel Jan 11 '19 at 04:51

google maps marker strangely stretched issue

3 Answers3