खास जानकारी
इस ट्यूटोरियल की मदद से, Google मैप पर लेजेंड बनाने का तरीका जानें. लेजेंड आम तौर पर, मैप पर चिह्नों और मार्कर के बारे में बताते हैं. इन्हें बनाया जा सकता है पोज़िशनिंग सुविधा का इस्तेमाल करके कस्टम कंट्रोल.
नीचे दिए गए मैप में एक लेजेंड है, जिसमें तीन के बारे में जानकारी दी गई है मैप पर अलग-अलग कस्टम मार्कर मौजूद हों.
नीचे दिया गया सेक्शन वह पूरा कोड दिखाता है जिसकी ज़रूरत आपको मैप और लेजेंड बनाने के लिए होती है इस ट्यूटोरियल में देखें.
TypeScript
let map: google.maps.Map; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { zoom: 16, center: new google.maps.LatLng(-33.91722, 151.23064), mapTypeId: "roadmap", }); const iconBase = "https://maps.google.com/mapfiles/kml/shapes/"; const icons: Record<string, any> = { parking: { name: "Parking", icon: iconBase + "parking_lot_maps.png", }, library: { name: "Library", icon: iconBase + "library_maps.png", }, info: { name: "Info", icon: iconBase + "info-i_maps.png", }, }; const features = [ { position: new google.maps.LatLng(-33.91721, 151.2263), type: "info", }, { position: new google.maps.LatLng(-33.91539, 151.2282), type: "info", }, { position: new google.maps.LatLng(-33.91747, 151.22912), type: "info", }, { position: new google.maps.LatLng(-33.9191, 151.22907), type: "info", }, { position: new google.maps.LatLng(-33.91725, 151.23011), type: "info", }, { position: new google.maps.LatLng(-33.91872, 151.23089), type: "info", }, { position: new google.maps.LatLng(-33.91784, 151.23094), type: "info", }, { position: new google.maps.LatLng(-33.91682, 151.23149), type: "info", }, { position: new google.maps.LatLng(-33.9179, 151.23463), type: "info", }, { position: new google.maps.LatLng(-33.91666, 151.23468), type: "info", }, { position: new google.maps.LatLng(-33.916988, 151.23364), type: "info", }, { position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775), type: "parking", }, { position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496), type: "parking", }, { position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587), type: "parking", }, { position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267), type: "parking", }, { position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644), type: "parking", }, { position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569), type: "parking", }, { position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781), type: "parking", }, { position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578), type: "library", }, ]; features.forEach((feature) => { new google.maps.Marker({ position: feature.position, icon: icons[feature.type].icon, map: map, }); }); const legend = document.getElementById("legend") as HTMLElement; for (const key in icons) { const type = icons[key]; const name = type.name; const icon = type.icon; const div = document.createElement("div"); div.innerHTML = '<img src="' + icon + '"> ' + name; legend.appendChild(div); } map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 16, center: new google.maps.LatLng(-33.91722, 151.23064), mapTypeId: "roadmap", }); const iconBase = "https://maps.google.com/mapfiles/kml/shapes/"; const icons = { parking: { name: "Parking", icon: iconBase + "parking_lot_maps.png", }, library: { name: "Library", icon: iconBase + "library_maps.png", }, info: { name: "Info", icon: iconBase + "info-i_maps.png", }, }; const features = [ { position: new google.maps.LatLng(-33.91721, 151.2263), type: "info", }, { position: new google.maps.LatLng(-33.91539, 151.2282), type: "info", }, { position: new google.maps.LatLng(-33.91747, 151.22912), type: "info", }, { position: new google.maps.LatLng(-33.9191, 151.22907), type: "info", }, { position: new google.maps.LatLng(-33.91725, 151.23011), type: "info", }, { position: new google.maps.LatLng(-33.91872, 151.23089), type: "info", }, { position: new google.maps.LatLng(-33.91784, 151.23094), type: "info", }, { position: new google.maps.LatLng(-33.91682, 151.23149), type: "info", }, { position: new google.maps.LatLng(-33.9179, 151.23463), type: "info", }, { position: new google.maps.LatLng(-33.91666, 151.23468), type: "info", }, { position: new google.maps.LatLng(-33.916988, 151.23364), type: "info", }, { position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775), type: "parking", }, { position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496), type: "parking", }, { position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587), type: "parking", }, { position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267), type: "parking", }, { position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644), type: "parking", }, { position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569), type: "parking", }, { position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781), type: "parking", }, { position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578), type: "library", }, ]; features.forEach((feature) => { new google.maps.Marker({ position: feature.position, icon: icons[feature.type].icon, map: map, }); }); const legend = document.getElementById("legend"); for (const key in icons) { const type = icons[key]; const name = type.name; const icon = type.icon; const div = document.createElement("div"); div.innerHTML = '<img src="' + icon + '"> ' + name; legend.appendChild(div); } map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend); } window.initMap = initMap;
सीएसएस
/* * 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; } #legend { font-family: Arial, sans-serif; background: #fff; padding: 10px; margin: 10px; border: 3px solid #000; } #legend h3 { margin-top: 0; } #legend img { vertical-align: middle; }
एचटीएमएल
<html> <head> <title>Custom Legend</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <div id="legend"><h3>Legend</h3></div> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
सैंपल आज़माएं
नीचे दिए गए सेक्शन में लेजेंड बनाने का तरीका बताया गया है.
लेजेंड कंटेनर बनाना
नीचे दी गई टेबल में उस कोड के बारे में बताया गया है जो लेजेंड को पसंद के मुताबिक बनाता है.
कोड और जानकारी | |
---|---|
|
कॉन्टेंट होल्ड करने के लिए div बनाता है.div में हेडिंग लेवल तीन (3) जोड़ता है. |
|
div को इसके दाएं-नीचे स्थान देता है
नियंत्रण की स्थिति जोड़कर मैप को देख सकते हैं. इसके बारे में पढ़ें कंट्रोल की पोज़िशन के ज़्यादा विकल्प. |
|
सीएसएस का इस्तेमाल करके, लेजेंड कंट्रोल को स्टाइल करता है. |
लेजेंड की सामग्री जोड़ना
लेजेंड डालने के लिए, मौजूदा मार्कर स्टाइल का इस्तेमाल करें.
var legend = document.getElementById('legend');
for (var style in styles) {
var name = style.name;
var icon = style.icon;
var div = document.createElement('div');
div.innerHTML = '<img src="' + icon + '"> ' + name;
legend.appendChild(div);
}