[Google Maps API v3] Marker.setIcon()

Wed, 16 Jun 2010 04:28:17 -0700 

Hi All,

I am having problem with Marker.setIcon(MarkerImage), and it is as
follows:

I want to be able to change a marker's icon when needed, i.e., on zoom
out, scale it down.

I created a script to simplify the prototyping process (excluding the
zoom_changed handler).

I initially set marker's icon via constructor. Then later, I change
icon via setIcon(MarkerImage). The marker will then have the new image
but it's cropped. Here's the script i used to test the behavior.

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Complex Icons</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
    function initialize() {
        var myOptions = {
            zoom: 10,
            center: new google.maps.LatLng(-33.9, 151.2),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new
google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

        setMarkers(map, beaches);
    }

    /**
    * Data for the markers consisting of a name, a LatLng and a zIndex
for
    * the order in which these markers should display on top of each
    * other.
    */
    var beaches = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var markers = [];

    function setMarkers(map, locations) {
        // Add markers to the map

        // Marker sizes are expressed as a Size of X,Y
        // where the origin of the image (0,0) is located
        // in the top left of the image.

        // Origins, anchor positions and coordinates of the marker
        // increase in the X direction to the right and in
        // the Y direction down.
        var image = new google.maps.MarkerImage("http://google-maps-
icons.googlecode.com/files/home.png",
            // This marker is 20 pixels wide by 32 pixels tall.
            new google.maps.Size(32, 37),
            // The origin for this image is 0,0.
            new google.maps.Point(0, 0),
            // The anchor for this image is the base of the flagpole
at 0,32.
            new google.maps.Point(16, 37),
            // set scaledSize:
            new google.maps.Size(32, 37));


        // Shapes define the clickable region of the icon.
        // The type defines an HTML <area> element 'poly' which
        // traces out a polygon as a series of X,Y points. The final
        // coordinate closes the poly by connecting to the first
        // coordinate.
        var shape = {
            coord: [1, 1, 1, 20, 18, 20, 18, 1],
            type: 'poly'
        };
        for (var i = 0; i < locations.length; i++) {
            var beach = locations[i];
            var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                // shadow: shadow,
                icon: image,
                shape: shape,
                title: beach[0],
                zIndex: beach[3]
            });
            markers[i] = marker;
        }
    }

    function setMarkerImage() {
        // 
http://code.google.com/apis/maps/documentation/javascript/reference.html#MarkerImage:
        // "To scale the image, whether sprited or not, set the value
of scaledSize to the size of the whole image and set size,
        // origin and anchor in scaled values. The MarkerImage cannot
be changed once constructed."
        //
        var newImage = new google.maps.MarkerImage(
        // url:
            "http://google-maps-icons.googlecode.com/files/home.png";,
        // size:
            new google.maps.Size(16, 16),
        // origin:
            new google.maps.Point(0, 0),
        // anchor:
            new google.maps.Point(8, 16),
        // set scaledSize:
            new google.maps.Size(32, 37));

        for (var i = 0; i < markers.length; i++) {
            markers[i].setIcon(null);
            markers[i].setIcon(newImage);
        }

    }
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
  <input type="button" value="Set Marker Image"
onclick="setMarkerImage()">
</body>
</html>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Reply via email to