I'm trying to dynamically change a marker's icon when the marker is clicked. I have multiple markers on the map (gathered through a database query), and this is the code I'm currently using - all pretty standard stuff:

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:".png"});
                this.setIcon(icon);     //why doesn't this work?

        })
        <?php
    }
    ?>

}

The infoWindow code works fine, but the seticon code just makes the marker disappear and doesn't show the new marker icon. The new icon URL is valid, as you can see by opening it in your browser.

So can anyone tell me why this code isn't working?

I'm trying to dynamically change a marker's icon when the marker is clicked. I have multiple markers on the map (gathered through a database query), and this is the code I'm currently using - all pretty standard stuff:

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./bikestats/images/bike_red.png"});
                this.setIcon(icon);     //why doesn't this work?

        })
        <?php
    }
    ?>

}

The infoWindow code works fine, but the seticon code just makes the marker disappear and doesn't show the new marker icon. The new icon URL is valid, as you can see by opening it in your browser.

So can anyone tell me why this code isn't working?

• javascript
• google-maps-api-3
• maps

1 Answer 1

MarkerImage expects the url as first parameter, not an object which contains the url.

But you should avoid the use of MarkerImage, it's deprecated.

You also may pass the url directly to setIcon.

possible methods(all will give the same result):

  //use the MarkerImage-object
 this.setIcon(icon);    

  //simply use the url 
 this.setIcon('http://jovansfreelance./bikestats/images/bike_red.png');  

  //using an google.maps.Icon-object
 this.setIcon({url:'http://jovansfreelance./bikestats/images/bike_red.png'});