HTML Google Maps | How to create google map in HTML code in hindi

‎Introduction to HTML Google Maps (एचटीएमएल गूगल मैप्स का परिचय)‎

‎In HTML we have discussed some properties, attributes with the elements in previous articles its have many features to attract online users in web technology. In that Google, map is one of the one’s features in Google Company in that we will use the same google map in our HTML codes for displaying the location in the website. It is mostly used for the company websites for identifying the location exactly where they located on the areas. It is called upon the HTML by using Javascript language for locating and set the latitude and longitude for Geo-locations for the companies.

एचटीएमएल में हमने कुछ गुणों पर चर्चा की है, पिछले लेखों में तत्वों के साथ विशेषताएं इसमें वेब तकनीक में ऑनलाइन उपयोगकर्ताओं को आकर्षित करने के लिए कई विशेषताएं हैं। उस गूगल में, नक्शा गूगल कंपनी में एक की विशेषताओं में से एक है कि हम वेबसाइट में स्थान प्रदर्शित करने के लिए हमारे HTML कोड में एक ही गूगल मैप का उपयोग करेंगे । यह ज्यादातर स्थान की पहचान करने के लिए कंपनी वेबसाइटों के लिए प्रयोग किया जाता है वास्तव में जहां वे क्षेत्रों पर स्थित है । यह पता लगाने के लिए जावास्क्रिप्ट भाषा का उपयोग करके एचटीएमएल का आह्वान किया जाता है और कंपनियों के लिए भू-स्थानों के लिए अक्षांश और देशांतर निर्धारित करता है।‎

Syntax:

‎HTML has a general syntax for every tags for use to develop the contents in the web pages.

एचटीएमएल में वेब पेजों में सामग्री विकसित करने के लिए उपयोग के लिए हर टैग के लिए एक सामान्य वाक्य रचना है।‎

<html> <body> <script src=”google-api url”> function() { } </script> </body> </html>

The syntax for the HTML google map is adding the Google API in the script tag then we will set the geo-locations of the web page contents. we can align and use some HTML elements, attributes to the web page for attracting the users it will be the growth of the companies and businesses. Based on the business needs we will customize the web pages with the user-friendly environments.

‎एचटीएमएल गूगल मैप के लिए सिंटेक्स स्क्रिप्ट टैग में गूगल एपीआई जोड़ रहा है तो हम वेब पेज की सामग्री के जियो-लोकेशन सेट करेंगे । हम कुछ एचटीएमएल तत्वों को संरेखित और उपयोग कर सकते हैं, उपयोगकर्ताओं को आकर्षित करने के लिए वेब पेज पर गुण यह कंपनियों और व्यवसायों का विकास होगा। व्यवसाय की जरूरतों के आधार पर हम उपयोगकर्ता के अनुकूल वातावरण के साथ वेब पेजों को अनुकूलित करेंगे।‎

👉How to Create a Google Map in HTML‎

(एचटीएमएल में Google मानचित्र कैसे बनाएं‎?)

‎We will call the google map API on our web page using <script> tag. We can set the marker after adding the google map in the HTML page mainly it contains three steps.1. We will create an HTML page first,2. Then adding the map with a marker,3. finally, we will get the API key to authenticate the locations. We will create a HTML page with our predefined tags based on the customize prospectus and also align the style attributes in the page if they needs using <div> element we will segregate the contents with separate modules view in the web sites.

हम <स्क्रिप्ट>टैग का उपयोग करके अपने वेब पेज पर गूगल मैप एपीआई को कॉल करेंगे। हम एचटीएमएल पेज में गूगल मैप जोड़ने के बाद मार्कर सेट कर सकते हैं मुख्य रूप से इसमें तीन चरण होते हैं। हम एक HTML पृष्ठ पहले, 2 बनाएंगे। फिर एक मार्कर, 3 के साथ नक्शा जोड़ने। अंत में, हमें स्थानों को प्रमाणित करने के लिए एपीआई कुंजी मिलेगी। हम कस्टमाइज़ प्रॉस्पेक्टस के आधार पर अपने प्रीडिभाषित टैग के साथ एक एचटीएमएल पेज बनाएंगे और पेज में स्टाइल विशेषताओं को भी संरेखित करेंगे यदि उन्हें <div>सीलमेंट का उपयोग करने की आवश्यकता है तो हम वेब साइटों में अलग मॉड्यूल दृश्य के साथ सामग्री को अलग करेंगे।‎

Adding the map with a marker is the second level for creating the google map in the web page in this section it will describe how to load the maps in Javascript API into the web pages and also we will write our javascript functions that uses the API to add the map with a marker one for the web page. When we add the API in the script tag the callback parameters will execute some conditions like initMap function after the script loads the map API. If we use a sync attributes in the web page script the browser to allow the API loads in the web pages rest of the rendering page contents. In Script tag google map API URL we will see the key parameter it contains the API key we will not set any key for this section, will generate the API key automatically and then callback parameter is called by using initMap function with parameters.

‎एक मार्कर के साथ नक्शा जोड़ना इस खंड में वेब पेज में गूगल मैप बनाने के लिए दूसरा स्तर है यह वर्णन करेगा कि जावास्क्रिप्ट एपीआई में नक्शे को वेब पेज में कैसे लोड किया जाए और हम अपने जावास्क्रिप्ट कार्यों को भी लिखेंगे जो वेब पेज के लिए एक मार्कर के साथ नक्शा जोड़ने के लिए एपीआई का उपयोग करता है। जब हम स्क्रिप्ट टैग में एपीआई जोड़ते हैं तो कॉलबैक पैरामीटर कुछ शर्तों को निष्पादित करेंगे जैसे कि स्क्रिप्ट मानचित्र एपीआई लोड होने के बाद initMap फ़ंक्शन। यदि हम वेब पेज स्क्रिप्ट में सिंक विशेषताओं का उपयोग करते हैं तो ब्राउज़र वेब पेज शेष रेंडरिंग पेज सामग्री में एपीआई लोड की अनुमति दे। स्क्रिप्ट टैग गूगल मैप एपीआई यूआरएल में हम देखेंगे कि इसमें एपीआई कुंजी है जो हम इस सेक्शन के लिए कोई कुंजी सेट नहीं करेंगे, एपीआई कुंजी को स्वचालित रूप से उत्पन्न करेंगे और फिर पैरामीटर के साथ initMap फ़ंक्शन का उपयोग करके कॉलबैक पैरामीटर कहा जाता है।‎

‎The initMap function will use for initializing and adds the map whenever we load the web pages by using javascript function with script tags HTML tags. We will call some default methods in the function like getElementById() is one of the functions in a javascript library to find the map location on the web page by segregate the <div> tag in HTML. In Script function we will create the map instance by using new operator like same in the java programming language new google.maps.Map() is the syntax for creating google map instance in the javascript functions.

जब भी हम स्क्रिप्ट टैग एचटीएमएल टैग के साथ जावास्क्रिप्ट फ़ंक्शन का उपयोग करके वेब पेज लोड करते हैं तो इनिटमैप फ़ंक्शन का उपयोग शुरू करने और मानचित्र को जोड़ता है। हम इस फ़ंक्शन में कुछ डिफ़ॉल्ट तरीकों को कॉल करेंगे जैसे कि getElementById () एचटीएमएल में <div>tag को अलग करके वेब पेज पर मानचित्र स्थान खोजने के लिए जावास्क्रिप्ट लाइब्रेरी में कार्यों में से एक है। स्क्रिप्ट फ़ंक्शन में हम जावा प्रोग्रामिंग भाषा में उसी तरह के नए ऑपरेटर का उपयोग करके मानचित्र उदाहरण बनाएंगे ‎‎new google.maps.Map () ‎‎जावास्क्रिप्ट कार्यों में Google मानचित्र उदाहरण बनाने के लिए वाक्य रचना है।‎

‎We will use our predefined tag in HTML like <center>, side navigations for where we locate the map in the web pages, the map will coordinate the HTML page with the order like the first latitude and then longitude. We will set the zoom options in both minimum and maximum size and also portrait, landscape navigations with the web pages. If the zoom property has set the vale like 0 is the lowest part in zoom section view and it displays the whole map in the single page.we can set the higher values in zoom property with high-resolution image in web pages. We will set the position of the marker on the web page by using position property.

हम एचटीएमएल में अपने प्रीडिभाषित टैग का उपयोग करेंगे जैसे <सेंटर>, साइड नेविगेशन जहां हम वेब पेजों में नक्शे का पता लगाते हैं, वहीं नक्शा पहले अक्षांश और फिर देशांतर जैसे आदेश के साथ एचटीएमएल पेज का समन्वय करेगा। हम वेब पेजों के साथ न्यूनतम और अधिकतम आकार और पोर्ट्रेट, लैंडस्केप नेविगेशन दोनों में ज़ूम विकल्प निर्धारित करेंगे। यदि ज़ूम संपत्ति ने घाटी को सेट किया है जैसे 0 ज़ूम सेक्शन व्यू में सबसे कम हिस्सा है और यह पूरे मानचित्र को एकल पेज में प्रदर्शित करता है। हम वेब पेजों में उच्च-रिज़ॉल्यूशन छवि के साथ ज़ूम संपत्ति में उच्च मूल्यों को सेट कर सकते हैं। हम स्थिति संपत्ति का उपयोग करके वेब पेज पर मार्कर की स्थिति निर्धारित करेंगे।‎

‎We will get the API key in the third step when we create the map in the web page, the key will use for authenticate the map, javascript functions in our customized API key. Using the Google cloud platform console tool containing options for creating the own API key.

जब हम वेब पेज में नक्शा बनाते हैं तो हमें तीसरे चरण में एपीआई कुंजी मिलेगी, कुंजी हमारे अनुकूलित एपीआई कुंजी में मानचित्र, जावास्क्रिप्ट कार्यों को प्रमाणित करने के लिए उपयोग करेगी। गूगल क्लाउड प्लेटफ़ॉर्म कंसोल टूल का उपयोग करना जिसमें स्वयं की एपीआई कुंजी बनाने के विकल्प हैं।‎

👉‎Examples of HTML Google Maps

(एचटीएमएल गूगल मैप्स के उदाहरण)‎

‎Below are the examples of HTML Google Maps:

नीचे HTML Google मानचित्र के उदाहरण दिए गए हैं:‎

Example #1

Code:

<html> <body> <div id="m" style="width:402px;height:433px;background:green"></div> <script> function sample() { var m1 = { center: new google.maps.LatLng(52.3, -0.14), zoom: 13, mapss: google.maps.MapTypeId.HYBRID } var m2 = new google.maps.Map(document.getElementById("m"), m1); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=sample"></script> </body> </html>

Output:

HTML Google Maps Example1

Example #2

Code:

<html> <head> <style> #m { height: 403px; width: 102%; } </style> </head> <body> <div id="m"></div> <script> function initMap() { var loc = {lat: -26.334, lng: 132.034}; var m1 = new google.maps.Map( document.getElementById('m'), {zoom: 3, center: loc}); var mar = new google.maps.Marker({position: loc, map: m1}); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script> </body> </html>

Output:

HTML Google Maps Example2

Example #3

Code:

<!DOCTYPE html> <html> <body> <div id="m1" style="width:402px;height:303px;"></div> <br> <div id="m2" style="width:402px;height:303px;"></div> <br> <div id="m3" style="width:402px;height:303px;"></div> <br> <div id="m4" style="width:402px;height:303px;"></div> <script> function sample() { var choice1 = { center: new google.maps.LatLng(51.503442,-0.120540),zoom:7,mapTypes: google.maps.MapTypeId.ROADMAP

}; var choice2 = { center: new google.maps.LatLng(51.503442,-0.120540), zoom:7, mapTypes: google.maps.MapTypeId.SATELLITE }; var choice3 = { center: new google.maps.LatLng(51.503442,-0.120540), zoom:7, mapTypes: google.maps.MapTypeId.HYBRID }; var choice4 = { center: new google.maps.LatLng(51.503442,-0.120540), zoom:7, mapTypes: google.maps.MapTypeId.TERRAIN }; var i = new google.maps.Map(document.getElementById("m1"),choice1); var j = new google.maps.Map(document.getElementById("m2"),choice2); var k = new google.maps.Map(document.getElementById("m3"),choice3); var l = new google.maps.Map(document.getElementById("m4"),choice4); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=sample"></script> </body> </html>

Output:

‎Above examples, we use Google Maps in the three different styles with pre-defined HTML elements, attributes, and javascript functions to call the map API in the web pages.

उपर्युक्त उदाहरणों के अनुसार, हम वेब पेजों में मानचित्र एपीआई को कॉल करने के लिए पूर्व-परिभाषित एचटीएमएल तत्वों, विशेषताओं और जावास्क्रिप्ट कार्यों के साथ तीन अलग-अलग शैलियों में Google मानचित्र का उपयोग करते हैं।‎

👉‎Conclusion(समाप्ति‎)

‎In the javascript function use map API in the document for identifying the location it’s fully based upon the sensors when we use the mobile in the google map we will enable the location so that only it will fetch the data from a source location to destination direction. We also check whether the application accepts the sensor to detect the user location checks browser compatibility issue Sensor parameter is not used for longer durations

जावास्क्रिप्ट फ़ंक्शन में दस्तावेज़ में मानचित्र एपीआई का उपयोग उस स्थान की पहचान करने के लिए किया जाता है जो सेंसर पर पूरी तरह से आधारित होता है जब हम Google मानचित्र में मोबाइल का उपयोग करते हैं तो हम स्थान को सक्षम करेंगे ताकि केवल यह डेटा स्रोत स्थान से गंतव्य दिशा में ले सके। हम यह भी जांचते हैं कि क्या एप्लिकेशन उपयोगकर्ता स्थान का पता लगाने के लिए सेंसर स्वीकार करता है ब्राउज़र अनुकूलता समस्या सेंसर पैरामीटर का उपयोग लंबी अवधि के लिए नहीं किया जाता है‎

👉‎Recommended Article(अनुशंसित लेख‎)

‎This is a guide to HTML Google Maps. Here we discuss how to create a Google Map in HTML and its Examples with Code Implementation and Output. You can also go through our other related articles to learn more.

यह एचटीएमएल गूगल मैप्स के लिए एक गाइड है। यहां हम चर्चा करते हैं कि एचटीएमएल में Google मानचित्र कैसे बनाया जाए और कोड कार्यान्वयन और आउटपुट के साथ इसके उदाहरण हैं। आप अधिक जानने के लिए हमारे अन्य संबंधित लेखों के माध्यम से भी जा सकते हैं‎ –