Geek asks and answers

Change google maps marker icon when clicking on an external link?

I have a google map with a lot of markers (compiled from a MySQL database). I am currently using the following code to change the marker icon when I click on this marker:

var redbikeicon = "images/bike_red.png";

<?php
    $result=mysql_query("select * from sites") or die(mysql_error());
    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});

        //add event to every marker
        google.maps.event.addListener(marker, 'click', function(){
            //change icon color
            this.setIcon(redbikeicon);      //replace default icon with red version (color-marking all chosen markers)

        })
        <?php
    }
    ?>

This code works fine, but now I need to do the same as clicking a link on a page - on the page next to the map there is a list of links, each of which corresponds to one of the markers on the map. When a link is clicked, the corresponding marker should change colors in the same way as when clicking on a marker. How to do it?

0
source share
2 answers

- , , . . jQuery . , click . "record_id", , , "record_id".

, , , , setIcon, googlemaps api.

, .

id:

marker = new google.maps.Marker({
    record_id: record_id,
    position: point,
    map: map,
    title: name,
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=whatever|BDD73C|000000'
});

:

$("a.whatever").click(function(){
    var id = $(this).attr('id');
    changeMarker(id);                             
});

setIcon, :

function changeMarker(record_id){
    for (i in Markers){
        if(Markers[i].record_id == record_id){
            Markers[i].setIcon('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=title|EC2A8C|000000');
        }
    }
}
+7

'click' .

google.maps.event.trigger(gmarkers[i], "click");

( infowindow)

+2

More articles:


All Articles