Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

google maps marker strangely stretched issue

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 draggingclose 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>
like image 478
niklas Avatar asked May 30 '12 17:05

niklas


People also ask

How do I change the marker size on Google Maps?

You can't modify the default marker size. You need to make a custom marker that uses the same icon and change the size of that. You can check the documentation here on how to use custom marker icons: developers.google.com/maps/documentation/javascript/…

How do I move a marker smoothly on Google Maps?

The initialize() function creates a Google Map with a marker. The transition() and moveMarker() are used to move marker smoothly on click on the Google map.

How do I turn off Zoom on Google Maps?

Disabling Pan and Zoom To entirely disable the ability to pan and zoom the map, two options, gestureHandling and zoomControl, must be included. Note: Read the guide on using TypeScript and Google Maps. The map below demonstrates the combination of gestureHandling and zoomControl in the code above.

How do you refresh a marker on Google Maps?

To reload the markers, when you create then, push them to an array. Then create a function where you iterate through the array, setting the markers map as null. After this, erase the array.


2 Answers

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.

like image 70
Heitor Chang Avatar answered Nov 06 '22 00:11

Heitor Chang


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

div#map_geolocation img {
  max-width:none;
}
like image 26
bakabona Avatar answered Nov 06 '22 00:11

bakabona