I am trying to save a reference to a clicked Google Maps marker. Currently my code works like so:
- Click marker.
- Check which iconType (
data-icon-type) the marker has (either Landmarks or Projects). - Depending on which iconType (
data-icon-type) the marker has, switch the icon to the 'active' marker icon.
Steps 1 – 3 work fine. But the following is what I am currently stuck on is as follows:
- Save out the id of the clicked marker (
data-marker-id). - When clicking a new marker, get the id of the previously clicked marker, check which iconType (
data-icon-type) the marker has (either Landmarks or Projects). - Reset the previously clicked marker's icon to the 'inactive' marker icon.
- Set the newly clicked markers icon to it's 'active' icon.
I should point out that I am using the Advanced Custom Fields Google Map field to populate my map locations.
Here are the various functions for rendering the map:
/*
* new_map
*
* This function will render a Google Map onto the selected jQuery element
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param jQueryel (jQuery element)
* @return n/a
*/
function new_map(jQueryel) {
// var
var jQuerymarkers = jQueryel.find('.marker');
// vars
var args = {
minZoom: 12,
maxZoom: 17,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
scrollwheel: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
};
// create map
var map = new google.maps.Map(jQueryel[0], args);
// add a markers reference
map.markers = [];
// add markers
jQuerymarkers.each(function() {
add_marker(jQuery(this), map);
});
// center map
center_map(map);
// return
return map;
}
/*
* add_marker
*
* This function will add a marker to the selected Google Map
*
* @type function
* @date 8/11/2013
* @since 4.3.0
*
* @param jQuerymarker (jQuery element)
* @param map (Google Map object)
* @return n/a
*/
function add_marker(jQuerymarker, map) {
// var
var latlng = new google.maps.LatLng(jQuerymarker.attr('data-lat'), jQuerymarker.attr('data-lng'));
var markerID = jQuerymarker.attr('data-marker-id');
var cleanTitle = jQuerymarker.attr('data-clean-title');
var iconType = jQuerymarker.attr('data-icon-type');
var icon = {
url: jQuerymarker.attr('data-icon'), // url
};
// create marker
var marker = new google.maps.Marker({
position: latlng,
map: map,
id: markerID,
icon: icon
});
// add to array
map.markers.push(marker);
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
var identification;
if (jQuery('#box').hasClass('slide-right-active')) {
// Check to see what the previous icon was,
//then it swaps out the icon for the original icon
if (prevIconType == 'landmarks') {
console.log("second landmarks");
icon = {
url: 'Landmarks.png', // url
};
marker.setIcon(icon);
} else if (prevIconType == 'projects') {
console.log("second projects");
icon = {
url: 'Projects.png', // url
};
marker.setIcon(icon);
}
// Check to see what the icon the clicked marker has,
// then it swaps out the icon for the active icon
if (iconType === 'landmarks') {
icon = {
url: 'Landmarks-Active.png', // url
};
marker.setIcon(icon);
prevIconType = 'landmarks';
} else if (iconType === 'projects') {
icon = {
url: 'Projects-Active.png', // url
};
marker.setIcon(icon);
prevIconType = 'projects';
}
} else {
// Check to see what the icon the clicked marker has,
// then it swaps out the icon for the active icon
if (iconType === 'landmarks') {
icon = {
url: 'Landmarks-Active.png', // url
};
marker.setIcon(icon);
prevIconType = 'landmarks';
} else if (iconType === 'projects') {
icon = {
url: 'Projects-Active.png', // url
};
marker.setIcon(icon);
prevIconType = 'projects';
}
}
});
}
