गूगल मैप बुनियाद
- पिछला पृष्ठ मैप्स समीक्षा
- अगला पृष्ठ मैप्स ओवरले
बुनियादी गूगल मानचित्र बनाएं
इस उदाहरण में ब्रिटेन के लंदन के आसपास गूगल मानचित्र बनाया गया है:
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h1>मेरा पहला गूगल मानचित्र</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
center: नया 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: नया google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
mapProp वे परिमाणों को परिभाषित करते हैं।
center निर्धारित करता है (केंद्र को उपयोग करके)।
zoom परियाय निर्धारित करता है (मानचित्र को जमाएं और प्रयास करें)。
यह लाइन देखें:
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
यह पास किए गए पैरामीटरों (mapProp) id="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 Key
Google वेबसाइट को किसी भी Google API को मुफ्त में दूसरी बार फिर आदेश देने की अनुमति देता है, हर दिन हजारों बार。
नीचे दिए गए लिंक पर जाएं और API key कैसे प्राप्त करें जाएगा को जानें:
https://developers.google.com/maps/documentation/javascript/get-api-key
गूगल मानचित्र को API लोड करने के दौरान key पैरामीटर में यह API कुंजी खोजेंगे:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
- पिछला पृष्ठ मैप्स समीक्षा
- अगला पृष्ठ मैप्स ओवरले
