के चयन पर मानचित्र मार्कर को हाइलाइट करने के लिए कैसे करें एचटीएमएल तत्वों को Google मानचित्रों के साथ बातचीत करने में मदद की ज़रूरत है।एचटीएमएल तत्व
मेरे पास वेब पेज पर 2 अनुभाग हैं। पृष्ठ के दाईं ओर, मेरे पास एक नक्शा एकाधिक मार्कर दिखा रहा है। पृष्ठ के बाईं तरफ, मेरे पास पते के साथ एक सूची है जो मानचित्र में मार्करों से मेल खाती है।
कृपया पृष्ठ के बाईं ओर सूची से संबंधित पता चयनित होने पर मार्कर को हाइलाइट करने के तरीके पर पॉइंटर्स का सुझाव दें।
ठीक है, मैंने इसे होवर() के साथ बनाया है। Div पर होवरिंग मार्कर
<head>
<style>
html, body, #map-canvas {
height: 400px;
margin: 0px;
padding: 0px
}
#markers_info .marker {
height: 40px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?"></script>
<script>
/**
jQuery events
*/
$(document).ready(function() {
// initiate Google maps
initialize();
// make a .hover event
$('#markers_info .marker').hover(
// mouse in
function() {
// first we need to know which <div class="marker"></div> we hovered
var index = $('#markers_info .marker').index(this);
markers[index].setIcon(highlightedIcon());
},
// mouse out
function() {
// first we need to know which <div class="marker"></div> we hovered
var index = $('#markers_info .marker').index(this);
markers[index].setIcon(normalIcon());
}
);
});
/**
Google Maps stuff
*/
var markerData = [ // the order of these markers must be the same as the <div class="marker"></div> elements
{lat: 50.84498605, lng: 4.349977747, title: 'Manneken Pis'},
{lat: 50.84848913, lng: 4.354053363, title: 'Jeanneke Pis'},
{lat: 50.84673465, lng: 4.352466166, title: 'Grand Place'}
];
var map;
var markers = [];
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(50.84673465,4.352466166), // Brussels, Belgium
mapTypeId: google.maps.MapTypeId.ROADMAP
};
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (var i=0; i<markerData.length; i++) {
markers.push(
new google.maps.Marker({
position: new google.maps.LatLng(markerData[i].lat, markerData[i].lng),
title: markerData[i].title,
map: map,
icon: normalIcon()
})
);
}
}
// functions that return icons. Make or find your own markers.
function normalIcon() {
return {
url: 'http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png'
};
}
function highlightedIcon() {
return {
url: 'http://steeplemedia.com/images/markers/markerGreen.png'
};
}
//google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="markers_info">
<div class="marker">Manneken Pis, 50.84498605,4.349977747</div>
<div class="marker">Jeanneke Pis, 50.84848913,4.354053363</div>
<div class="marker">Grand Place, 50.84673465,4.352466166</div>
</div>
</body>
बहुत बहुत धन्यवाद इमानुअल। यह वही सही चीज़ थी जिसे मैं ढूंढ रहा था। – Amz
ठीक है। मेरी खुशी –
@EmmanuelDelay आपको उत्तर को "स्वीकृत" – mfroese