Mapstraction: Changing an Icon's image URL after it has been added?

Posted by Paul Owens on Stack Overflow See other posts from Stack Overflow or by Paul Owens
Published on 2010-04-28T12:14:24Z Indexed on 2010/05/11 8:44 UTC
Read the original article Hit count: 430

Filed under:
|

I am trying to use marker.setIcon() to change a markers image. However it appears that although this changes the marker.iconUrl attribute the icon itself is using marker.proprietary_marker.$.icon.image to display the markers image - so the markers icon remains unchanged. Is there a way to dynamically change the marker.proprietary_marker.$.icon.image?

  1. Add a marker.
  2. Check the icon's image url and the proprietary icon's image - they're the same.
  3. Change the icon.
  4. Again check the Urls. Now the Icon Url has changed but the marker still shows the old image which is in the proprietary marker object.

 <head>
<title>Map Test</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=Your-Google-API-Key" type="text/javascript"></script>
<script src="mapstraction.js"></script>

<script type="text/javascript">
var map;
var marker;

function getMap(){
        map = new mxn.Mapstraction('myMap','google');
    map.setCenterAndZoom(new mxn.LatLonPoint(45.559242,-122.636467), 15);
}


function addMarker(){
        marker = new mxn.Marker(new mxn.LatLonPoint(45.559242, -122.636467));
    marker.addData({infoBubble : "Text", label : "Label",  marker : 4, icon: "http://mapscripting.com/examples/mashups/richter-high.png"});
    map.addMarker(marker);
}

function changeIcon(){
    marker.setIcon("http://assets1.mapufacture.com/images/markers/usgs_marker.png");
}


function showIconURL(){
        alert(marker.iconUrl);
} 


function showProprietaryIconURL(){
    alert(marker.proprietary_marker.$.icon.image);
}

</script>
</head>
<body onload="getMap()">
<div id="myMap" style="width:627px; height:412px;"></div>
<div>
    <input type="button" value="add marker" OnClick="addMarker();">
    <input type="button" value="change icon" OnClick="changeIcon();">
    <input type="button" value="show icon URL" OnClick="showIconURL();">
    <input type="button" value="show proprierty icon URL " OnClick="showProprietaryIconURL();">
</div>
</body>
</html>

© Stack Overflow or respective owner

Related posts about mapstraction

Related posts about JavaScript