गूगल मैप्स बेसिक
एक बुनियादी Google मानचित्र बनाएं
यह उदाहरण लंदन, इंग्लैंड में केंद्रित एक Google मानचित्र बनाता है:
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
center:new
google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>
इस पृष्ठ के शेष भाग में ऊपर दिए गए उदाहरण का चरण दर चरण वर्णन किया गया है।
मानचित्र कंटेनर और आकार
मानचित्र को धारण करने के लिए मानचित्र को HTML तत्व की आवश्यकता होती है:
<div id="googleMap" style="width:100%;height:400px"></div>
मानचित्र का आकार भी निर्धारित करें।
मानचित्र गुण सेट करने के लिए एक फ़ंक्शन बनाएं
function myMap() {
var mapProp = {
center:new
google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
मैपप्रॉप वैरिएबल मैप के गुणों को परिभाषित करता है।
केंद्र गुण निर्दिष्ट करता है कि मानचित्र को कहाँ केंद्रित किया जाए (अक्षांश और देशांतर निर्देशांकों का उपयोग करके)।
ज़ूम गुण मानचित्र के लिए ज़ूम स्तर निर्दिष्ट करता है ( ज़ूम स्तर के साथ प्रयोग करने का प्रयास करें)।
पंक्ति: var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); पास किए गए पैरामीटर (मैपप्रॉप) का उपयोग करके आईडी = "googleMap" के साथ <div> तत्व के अंदर एक नया नक्शा बनाता है।
एकाधिक मानचित्र
नीचे दिया गया उदाहरण विभिन्न मानचित्र प्रकारों के साथ चार मानचित्रों को परिभाषित करता है:
उदाहरण
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);
मुफ़्त Google API कुंजी
Google किसी वेबसाइट को किसी भी Google API को दिन में हज़ारों बार निःशुल्क कॉल करने की अनुमति देता है।
एपीआई कुंजी कैसे प्राप्त करें, यह जानने के लिए https://developers.google.com/maps/documentation/javascript/get-api-key पर जाएं।
Google मानचित्र API लोड करते समय कुंजी पैरामीटर में API कुंजी खोजने की अपेक्षा करता है:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>