अपने प्रोग्राम में एक मार्कर जोड़ना बहुत आसान है। आप बस इस कोड को जोड़ सकते हैं:
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
जब आप एक मार्कर का निर्माण करते हैं तो निम्नलिखित क्षेत्र विशेष रूप से महत्वपूर्ण और सामान्य रूप से सेट होते हैं:
position(आवश्यक) मार्कर के प्रारंभिक स्थान की पहचान करने वाले एक लैटलिंग को निर्दिष्ट करता है। लाटलिंग प्राप्त करने का एक तरीका जियोकोडिंग सेवा का उपयोग करना है ।map(वैकल्पिक) मार्कर को रखने के लिए मानचित्र को निर्दिष्ट करता है। यदि आप मार्कर के निर्माण पर एक नक्शा निर्दिष्ट नहीं करते हैं, तो मार्कर बनाया जाता है लेकिन नक्शे से जुड़ा नहीं है (या प्रदर्शित नहीं है)। मार्कर की setMap()विधि को कॉल करके आप मार्कर को बाद में जोड़ सकते हैं ।
ध्यान दें , उदाहरण में, शीर्षक फ़ील्ड ने मार्कर का शीर्षक सेट किया है जो टूलटिप के रूप में दिखाई देगा।
आप यहां Google api documenation से परामर्श कर सकते हैं ।
यह स्थापित करने के लिए एक पूरा उदाहरण है एक नक्शे में मार्कर। पूर्ण देखभाल करें, आपको YOUR_API_KEYअपनी Google API कुंजी को बदलना होगा :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
अब, यदि आप किसी मैप में किसी ऐरे के मार्कर को प्लॉट करना चाहते हैं, तो आपको इस तरह करना चाहिए:
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function initMap() {
var myLatLng = {lat: -33.90, lng: 151.16};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: myLatLng
});
var count;
for (count = 0; count < locations.length; count++) {
new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map,
title: locations[count][0]
});
}
}
यह उदाहरण मुझे निम्नलिखित परिणाम देता है:
आप अपने पिन में एक जानकारी भी जोड़ सकते हैं। आपको इस कोड की आवश्यकता है:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map
});
marker.info = new google.maps.InfoWindow({
content: 'Hello World!'
});
आपके पास Google के डॉक्यूमेंट यहाँ infoWindows के बारे में हो सकते हैं ।
जब मार्कर इस तरह "क्लिक" होता है, तो अब हम जानकारी खोल सकते हैं:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map
});
marker.info = new google.maps.InfoWindow({
content: locations [count][0]
});
google.maps.event.addListener(marker, 'click', function() {
// this = marker
var marker_map = this.getMap();
this.info.open(marker_map, this);
// Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
});
नोट , आप के बारे में कुछ प्रलेखन हो सकता है Listener यहाँ गूगल डेवलपर में।
और, अंत में, हम एक मार्कर में एक सूचना का निर्माण कर सकते हैं यदि उपयोगकर्ता उस पर क्लिक करता है। यह मेरा पूरा कोड है:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
// When the user clicks the marker, an info window opens.
function initMap() {
var myLatLng = {lat: -33.90, lng: 151.16};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: myLatLng
});
var count=0;
for (count = 0; count < locations.length; count++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map
});
marker.info = new google.maps.InfoWindow({
content: locations [count][0]
});
google.maps.event.addListener(marker, 'click', function() {
// this = marker
var marker_map = this.getMap();
this.info.open(marker_map, this);
// Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
आम तौर पर, आपके पास यह परिणाम होना चाहिए:
