गूगल मैप्स इवेंट्स
ज़ूम करने के लिए मार्कर पर क्लिक करें
हम अभी भी पिछले पृष्ठ से मानचित्र का उपयोग करते हैं: लंदन, इंग्लैंड पर केंद्रित नक्शा।
अब हम ज़ूम करना चाहते हैं जब कोई उपयोगकर्ता मार्कर पर क्लिक कर रहा हो (हम एक ईवेंट हैंडलर को एक मार्कर से जोड़ते हैं जो क्लिक करने पर मानचित्र को ज़ूम करता है)।
यहाँ जोड़ा गया कोड है:
उदाहरण
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
हम addListener () ईवेंट हैंडलर का उपयोग करके ईवेंट सूचनाओं के लिए पंजीकरण करते हैं। वह विधि एक वस्तु, सुनने के लिए एक घटना और निर्दिष्ट घटना होने पर कॉल करने के लिए एक फ़ंक्शन लेती है।
पैन बैक टू मार्कर
यहां, हम ज़ूम परिवर्तन सहेजते हैं और 3 सेकंड के बाद मानचित्र को वापस पैन करते हैं:
उदाहरण
google.maps.event.addListener(marker,'click',function() {
var pos = map.getZoom();
map.setZoom(9);
map.setCenter(marker.getPosition());
window.setTimeout(function() {map.setZoom(pos);},3000);
});
मार्कर पर क्लिक करते समय एक इन्फोविंडो खोलें
कुछ टेक्स्ट के साथ एक इन्फोविंडो दिखाने के लिए मार्कर पर क्लिक करें:
उदाहरण
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
मार्कर सेट करें और प्रत्येक मार्कर के लिए InfoWindow खोलें
जब उपयोगकर्ता मानचित्र पर क्लिक करता है तो फ़ंक्शन चलाएँ।
प्लेसमार्कर () फ़ंक्शन एक मार्कर रखता है जहां उपयोगकर्ता ने क्लिक किया है, और मार्कर के अक्षांश और देशांतर के साथ एक इन्फोविंडो दिखाता है:
उदाहरण
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(map, event.latLng);
});
function placeMarker(map, location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}