更改Jquery单击上的Google Map标记

Question

I'm trying to change GoogleMap marker icon by clicking div and using jquery. But it doesn't seem to be working, marker icon doesn't change. I assigned a variable that contains image path, but the thing is that if jquery changes it, it stays inside jquery function and is not passed back to global value. Here is my code:

JS part

$(document).ready(function() {

$('#hurricanes').click(function (e){
iconic=jQuery(this).attr('hurr.png');
    initMap();
});
$('#earthquakes').click(function (e){
iconic=jQuery(this).attr('durr.png');
    initMap();
});    
});


var iconBase = 'img/';
var iconic;
function createMarker(latlng, name, address1, address2, postalCode) {
    var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        title: name,
        icon: iconBase + iconic
    });

}

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: -0.397,
            lng: 10.644
        },
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        disableDefaultUI: true
    });
    displayMarkers();
}

And HTML buttons:

    <div id="hurricanes" class="choices">HURRICANES</div>
    <div id="earthquakes" class="choices">EARTHQUAKES</div>

Answer 1

you should reinitialize the map using JavaScript after you changed the marker. Have a look in the API Reference for all the options: https://developers.google.com/maps/documentation/javascript/3.exp/reference

Although I am not quite sure what you are exactly going to do, you can also remove the markers in specific coordinates and then add the new ones with new marker icons.

Answer 2

I found the solution by reinitializing both functions:

$(document).ready(function() {

$('#hurricanes').click(function (e){
iconic='hurr.png';
    createMarker();
    initMap();
    console.log(iconic);
});
$('#earthquakes').click(function (e){
iconic='durr.png';
    createMarker();
    initMap();
    console.log(iconic);
});


});