वेब विकास

रोडमैप क्या है HTTP क्या है एचटीएमएल क्या है सीएसएस क्या है उत्तरदायी क्या है जावास्क्रिप्ट क्या है ES5 क्या है? एचटीएमएल डोम क्या है गूगल मैप्स क्या है गूगल फॉन्ट क्या है Google चार्ट क्या है एक्सएमएल क्या है अजाक्स क्या है? JSON क्या है सीएसएस प्रतीक क्या है बूटस्ट्रैप क्या है W3.CSS क्या है सीएलआई क्या है? एनपीएम . क्या है गिटहब क्या है jQuery क्या है एंगुलरजेएस क्या है प्रतिक्रिया क्या है Vue.js क्या है W3.JS क्या है? फ्रंट-एंड देव क्या है। फुलस्टैक क्या है फुलस्टैक JS क्या है एसक्यूएल क्या है

अमेज़न एडब्ल्यूएस

एडब्ल्यूएस ईसी2 क्या है एडब्ल्यूएस आरडीएस क्या है एडब्ल्यूएस क्लाउडफ्रंट क्या है एडब्ल्यूएस एसएनएस क्या है लोचदार बीनस्टॉक क्या है एडब्ल्यूएस ऑटो स्केलिंग क्या है एडब्ल्यूएस आईएएम क्या है? एडब्ल्यूएस अरोड़ा क्या है एडब्ल्यूएस डायनेमोडीबी क्या है एडब्ल्यूएस वैयक्तिकृत क्या है एडब्ल्यूएस मान्यता क्या है एडब्ल्यूएस क्विकसाइट क्या है एडब्ल्यूएस पोली क्या है एडब्ल्यूएस पिनपॉइंट क्या है

गूगल मैप्स क्या है?


एचटीएमएल

गूगल मैप्स एक गूगल एपीआई है

Google फ़ॉन्ट्स एक Google API है

Google चार्ट एक Google API है


Google मानचित्र को अपने वेब पेज में जोड़ने का तरीका जानें।


उफ़! कुछ गलत हो गया।
इस पृष्ठ ने Google मानचित्र को ठीक से लोड नहीं किया। तकनीकी विवरण के लिए जावास्क्रिप्ट कंसोल देखें।

मेरा पहला गूगल मैप

एक साधारण वेब पेज से शुरू करें।

एक <div> तत्व जोड़ें जहां आप मानचित्र को प्रदर्शित करना चाहते हैं, और मानचित्र का आकार निर्धारित करें:

उदाहरण

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

<div id="map" style="width:100%;height:400px;">My map will go here</div>

</body>
<html>

नक्शा प्रदर्शित करने के लिए जावास्क्रिप्ट फ़ंक्शन जोड़ें:

उदाहरण

function myMap() {
    var mapCanvas = document.getElementById("map");
    var mapOptions = {
        center: new google.maps.LatLng(51.5, -0.2),
        zoom: 10
    };
    var map = new google.maps.Map(mapCanvas, mapOptions);
}

mapCanvas वेरिएबल मानचित्र का HTML तत्व है।

mapOptions चर मानचित्र के गुणों को परिभाषित करता है

केंद्र गुण निर्दिष्ट करता है कि मानचित्र को कहाँ केंद्रित किया जाए (अक्षांश और देशांतर निर्देशांकों का उपयोग करके)।

ज़ूम गुण मानचित्र के लिए ज़ूम स्तर निर्दिष्ट करता है ( ज़ूम स्तर के साथ प्रयोग करने का प्रयास करें)।

google.maps.Map ऑब्जेक्ट को पैरामीटर के रूप में mapCanvas और mapOptions के साथ बनाया गया है



अंत में Google API जोड़ें

मानचित्र की कार्यक्षमता Google पर स्थित JavaScript लाइब्रेरी द्वारा प्रदान की जाती है:

उदाहरण

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

गूगल मैप्स ट्यूटोरियल

हमारे Google मानचित्र ट्यूटोरियल में Google मानचित्र के बारे में अधिक जानें ।