google maps marker strangely stretched issue
google-maps-api-3, jquery
Solution
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.
Problem
I am experiencing a strange behavior of google maps (see attached image) does anyone know how that could come? Has anyone experienced that before? 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> ```