Here's a repro of the behavior contrasting the effect of a) Merely replacing an existing Marker's icon with a new scaled MarkerImage b) Creating a new Marker and using the new scaled MarkerImage
for a), the image got cropped. for b), the image got scaled correctly But using this work-around is a very resource-intensive activity, i.e., replacing every Marker with a new Marker that uses the scaled MarkerImage. code.maps.google team, I implore, please enlighten me, and in advance, thanks a lot!!! For those who want to see the behavior, copy/paste the script in notepad and name it <anyName>.htm. Open in IE or any browser. Click the button on the bottom. == Just a modified sample script, but highlighting the problem <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"> var _markers = []; var _map; function initialize() { var myOptions = { zoom: 10, center: new google.maps.LatLng(-33.9, 151.2), mapTypeId: google.maps.MapTypeId.ROADMAP } _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] ]; 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 32 pixels wide by 37 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), new google.maps.Size(32, 37)); 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 setIcons() { var myLatLng; var marker; for (var i = 0; i < _markers.length; i++) { // we create a new MarkerImage that will only replace the existing Markers' icon: var newImage = new google.maps.MarkerImage("http://google-maps- icons.googlecode.com/files/home.png", // This marker is 32 pixels wide by 37 pixels tall. new google.maps.Size(16, 18), // 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(8, 18), new google.maps.Size(16, 18)); // replace the existing Markers' icon: _markers[i].setIcon(newImage); _markers[i].setTitle("Image got cropped"); // we test the behavior by creating a new Marker using the new // MarkerImage, and see that the image got scaled correctly for // new Markers that use the newly-created scaled MarkerImage: // create new markers using the new MarkerImage: myLatLng = new google.maps.LatLng(_markers[i].getPosition().lat(), _markers[i].getPosition().lng() + 0.05); marker = new google.maps.Marker({ position: myLatLng, map: _map, icon: newImage, title: "New Marker using the newly-created scaled MarkerImage" }); } } </script> </head> <body style="margin:0px; padding:0px;" onload="initialize()"> <div id="map_canvas" style="width:100%; height:90%"></div> <button onclick = "setIcons()">Test setIcon()</button> </body> </html> On Jun 17, 10:17 am, dexter <[email protected]> wrote: > 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 -- 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}