CODEWITHSUNDEEP
google-mapsresizeiconsmarker
Ric
Ric

Reputation: 67

Google maps marker icons - loss in image quality when resizing

I'm having icon image quality issues when resizing my own map marker icons (png files) in google maps.

Here is an example of the problem:

Taking Google's 'Simple markers' example code:(developers.google.com/maps/documentation/javascript/examples/marker-simple)

and adding only a new 'icon' object (which I believe has replaced MarkerImage object from v3.11 maps api) gives me the following code (http://codepen.io/anon/pen/AIgkf?editors=100):

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
        html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
        function initialize() {
            var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);

            var mapOptions = {
                zoom: 4,
                center: myLatlng
            }

            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var myicon = {
                url: 'https://bnuviq.dm2301.livefilestore.com/y2pOGYfm607bdir1fks45DMUo0i9S-R5cZ1yc2Fy6kE6UAqf9qlmcHnwSeMvLrnAFz4YEFrYEu3JxMZBWHOxloZdlHmRhsuZmQR4rdP1G7K76o/blue_20.png?psid=1',
                origin: new google.maps.Point(0, 0),
                scaledSize: new google.maps.Size(24, 24),
                anchor: new google.maps.Point(12, 12)
            };

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon: myicon,
                //draggable: true,        // uncomment this draggable property or set draggable=false and icon displays correctly in Chrome???
                title: 'Test custom map icon'
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

My original png is 100x100 pixels but the image quality of the resized 24x24 icon is not very good. The edges of the white numbers become jagged.

I am using an original png file of 100x100 pixels because I want to use the same image file for both web and iOS/Android apps and the apps want to use larger map icons to prevent pixelisation.

Browser behaviour:

Chrome (Windows/Ubuntu)
icon image quality not good - numbers have jagged edges
Strangely however, if the marker's 'draggable' property is set to 'true', Chrome displays the icon correctly i.e. with no jagged edges???

Firefox (Windows/Ubuntu)
icon image quality not good - numbers have jagged edges

IE (Windows)
icon image quality not good - numbers have jagged edges

Can anyone suggest how to get my resized map icons displaying better?

Is the problem the large size of the original png file or something else? And any ideas why the icon displays correctly in Chrome when 'draggable=true'?

Thanks in advance
p.s. first post, apologies if I've left anything out

Upvotes: 1

Views: 3865

Answers (2)

paulo62
paulo62

Reputation: 2657

Try setting the optimized property in the marker options to false:

 var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon: myicon,
                optimized: false,   // <------
                title: 'Test custom map icon'
            });

This ensures that the marker is rendered as a separate DOM element by the browser and the scaling will be better quality.

No need to set draggable to true.

Upvotes: 4

javram
javram

Reputation: 2645

In Maps V3, when you add a custom marker that is not draggable, maps will draw it on the map tiles at the google server, and then send it down to you. When you mark it as draggable, it becomes it's own DOM object. When it is its own DOM object, the browser handles the resizing of the icon, when it is resized at google, their servers handle it. Seems to me that the algorithm Google uses to resize the icon is not as good as the one the browsers use. (and additionally, the algorithm that Chrome uses is better than the one in FF, at least for handling the resizing of text).

Have you considered using custom icons without text in them? they will most definitely appear better when resized. You could always add the text in the infowindow instead...

Upvotes: 1

Related Questions