Different Ways Of Controlling Image Marker Size And Shadow In Google Maps

We are currently displaying google maps v3 markers which work fine, but I'm interested in finding out how we can control the marker size (and potentially add a shadow) using the sa

Solution 1:

Here is one way to do it. You need to create and use the MarkerImage class for the icon and shadow and then swap them with an enlarged version during your event using the markers setIcon and setShadow methods. The enlarged MarkerImage class needs to use the scaledSize property. This will stretch the image to the size of your MarkerImagesize property

Here is a fiddle example of this in action: http://jsfiddle.net/bryan_weaver/jDgGD/

var beachFlagUrl = "https://developers.google.com/maps/documentation/javascript/examples/images/beachflag.png";
    var beachflagShadowUrl = "https://developers.google.com/maps/documentation/javascript/examples/images/beachflag_shadow.png";

    // 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(
    beachFlagUrl,
    // This marker is 20 pixels wide by 32 pixels tall.
    new google.maps.Size(20, 32),
    // 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(0, 32));

    var shadow = new google.maps.MarkerImage(
    beachflagShadowUrl,
    // The shadow image is larger in the horizontal dimension// while the position and offset are the same as for the main image.
    new google.maps.Size(37, 32), 
    new google.maps.Point(0, 0), 
    new google.maps.Point(0, 32));

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(-33.9, 151.2),
        map: map,
        shadow: shadow,
        icon: image,
        title: "Test Marker"
    });

    //double the size of the marker when the mouse is pressed.
    google.maps.event.addListener(marker, 'mousedown', function() {
        //The new Marker Image with the scaled Sizevar newIcon = new google.maps.MarkerImage(
            //marker image urlthis.icon.url, 
            //marker image size
            new google.maps.Size(this.icon.size.width * 2, 
                                 this.icon.size.height * 2), 
            //marker image originthis.icon.origin, 
            //marker image anchor
            new google.maps.Point(0, 64), 
            //marker image scaledSize
            new google.maps.Size(this.icon.size.width * 2, 
                                 this.icon.size.height * 2)
        );
        var newShadow = new google.maps.MarkerImage(
            this.shadow.url, 
            new google.maps.Size(this.shadow.size.width * 2,
                                 this.shadow.size.height * 2), 
            this.shadow.origin, 
            new google.maps.Point(0, 64), 
            new google.maps.Size(this.shadow.size.width * 2, 
                                 this.shadow.size.height * 2)
        );

        //set the new properties on the marker.this.setIcon(newIcon);
        this.setShadow(newShadow);

    });

    //return marker to original size when mouse is released.
    google.maps.event.addListener(marker, 'mouseup', function() {
        this.setIcon(image);
        this.setShadow(shadow);
    });