I may be mistaken but once you create a marker and define its size I don't think you cannot resize the marker, you would have to create a new one entirely. You are changing the image but the marker size remains the same and thus it just scales the image you are changing to the size of the marker.
Something you might look into is marker manager. You can specify different markers to be shown at different zoom levels and you can load up arrays of markers into a single marker manager so its easy to remove and add markers to the map like you are wanting to do. On Wed, Jun 16, 2010 at 5:51 AM, dexter <[email protected]> wrote: > 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]<google-maps-js-api-v3%[email protected]> > . > For more options, visit this group at > http://groups.google.com/group/google-maps-js-api-v3?hl=en. > > -- 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.
![http://google-maps-icons.googlecode.com/files/home.png"](https://google-maps-icons.googlecode.com/files/home.png"){kind=link}