Yes, sort of a marker manager is what I'm trying to make, but above the scripting layer. The script was just a means of testing the marker behavior when it's icon is replaced with a MarkerImage of a different scaled size.
The effect I have observed is the image/icon got cropped. Does anybody know or experienced this behavior, and would you kindly show the correct way of scaling a Marker object's MarkerImage? Thanks, Dexter On Jun 16, 9:46 pm, Nathan Raley <[email protected]> wrote: > 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.h... > > : > > // "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%2b[email protected]> > > . > > For more options, visit this group at > >http://groups.google.com/group/google-maps-js-api-v3?hl=en.- Hide quoted > >text - > > - Show quoted text - -- 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}