Google Maps - setIcon code makes the marker disappear
I am trying to dynamically change the marker icon when the marker is clicked. I have a few markers on a map (collected via a database query) and this is the code I'm using now - everything is pretty standard:
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-30,135),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
var bikeicon = "images/bike.png";
<?php
$result=mysql_query("select * from sites");
while($row=mysql_fetch_assoc($result)){
?>
marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $row['Latitude']; ?>, <?php echo $row['Longitude']; ?>),
map: map, icon: bikeicon});
infoWindow = new google.maps.InfoWindow();
marker.html="<?php echo stripslashes($row['ShortDesc']); ?>";
google.maps.event.addListener(marker, 'click', function(){
//show infowindow
infoWindow.setContent(this.html);
infoWindow.open(map, this);
//change icon color
var icon = new google.maps.MarkerImage({ url:"http://jovansfreelance.com/bikestats/images/bike_red.png"});
this.setIcon(icon); //why doesn't this work?
})
<?php
}
?>
}
The infoWindow code works great, but the seticon code just makes the marker disappear and doesn't display the new marker icon. The new icon url is valid, as you can see by opening it in your browser.
So can someone tell me why this code is not working?
+3
source to share
1 answer
MarkerImage expects the url to be the first parameter and not the object that contains the url.
But you should avoid using MarkerImage, it is deprecated.
You can also pass the url directly to setIcon.
possible methods (all will give the same result):
<Preview> // use the MarkerImage object this.setIcon (icon); // just use the url this.setIcon ('http://jovansfreelance.com/bikestats/images/bike_red.png'); // using google.maps.Icon-object this.setIcon ({URL: 'HTTP://jovansfreelance.com/bikestats/images/bike_red.png'});
+4
source to share