-1
クリックしたGoogleマップマーカーへの参照を保存しようとしています。現在、私のコードは次のように動作します。クリックしたGoogleマップのマーカーIDをリセットする - 次のマーカーでアイコンをリセットする
- クリックマーカー。
- マーカーが持つiconType（
data-icon-type）（ランドマークまたはプロジェクトのいずれか）を確認します。 - マーカーの種類（
data-icon-type）に応じて、アイコンを「アクティブ」マーカーアイコンに切り替えます。
手順1〜3は正常です。しかし、私が現在抱えているのは以下の通りです：
- クリックしたマーカーのIDを除外します（
data-marker-id）。 - 新しいマーカーをクリックすると、以前にクリックされたマーカーのIDを取得し、どのマーカータイプ（
data-icon-type）（ランドマークまたはプロジェクト）にあるかを確認します。 - 以前にクリックしたマーカーのアイコンを「非アクティブ」マーカーアイコンにリセットします。
- 新たにクリックされたマーカーアイコンを「アクティブ」アイコンに設定します。
高度なカスタムフィールドGoogleマップフィールドを使用して地図の場所を入力していることを指摘しておきます。ここで
は、マップをレンダリングするためのさまざまな機能です：
/*
* 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';
}
}
});
}