ನಿಮ್ಮ ವೆಬ್ ಪುಟಕ್ಕೆ ಗೂಗಲ್ ಮ್ಯಾಪ್ ಅನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು

05 ರ 01

ನಿಮ್ಮ ಸೈಟ್ಗಾಗಿ Google Maps API ಕೀ ಪಡೆಯಿರಿ

ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ಗೆ Google ನಕ್ಷೆಯನ್ನು ಸೇರಿಸಲು ಉತ್ತಮ ಮಾರ್ಗವೆಂದರೆ Google Maps API ಅನ್ನು ಬಳಸುವುದು. ನಕ್ಷೆಗಳನ್ನು ಬಳಸಲು ನೀವು API ಕೀಯನ್ನು ಪಡೆದುಕೊಳ್ಳಬೇಕೆಂದು Google ಶಿಫಾರಸು ಮಾಡುತ್ತದೆ.

Google Maps API v3 ಅನ್ನು ಬಳಸಲು ನೀವು API ಕೀಲಿಯನ್ನು ಪಡೆಯಬೇಕಾಗಿಲ್ಲ, ಆದರೆ ಇದು ನಿಮ್ಮ ಬಳಕೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಮತ್ತು ಹೆಚ್ಚುವರಿ ಪ್ರವೇಶಕ್ಕಾಗಿ ಪಾವತಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. Google Maps API v3 ಪ್ರತಿ ಸೆಕೆಂಡಿಗೆ 1 ವಿನಂತಿಯ ಕೋಟಾವನ್ನು ದಿನಕ್ಕೆ ಗರಿಷ್ಠ 25,000 ವಿನಂತಿಗಳಿಗೆ ಹೊಂದಿದೆ. ನಿಮ್ಮ ಪುಟಗಳು ಆ ಮಿತಿಗಳನ್ನು ಮೀರಿದರೆ ನೀವು ಇನ್ನಷ್ಟು ಪಡೆಯುವ ಸಲುವಾಗಿ ಬಿಲ್ಲಿಂಗ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬೇಕಾಗುತ್ತದೆ.

ಗೂಗಲ್ ನಕ್ಷೆಗಳು API ಕೀ ಪಡೆಯುವುದು ಹೇಗೆ

1. ನಿಮ್ಮ Google ಖಾತೆಯನ್ನು ಬಳಸಿಕೊಂಡು Google ಗೆ ಲಾಗಿನ್ ಮಾಡಿ.
2. ಡೆವಲಪರ್ ಕನ್ಸೋಲ್ಗೆ ಹೋಗಿ
3. ಪಟ್ಟಿಯ ಮೂಲಕ ಸ್ಕ್ರಾಲ್ ಮಾಡಿ ಮತ್ತು Google ನಕ್ಷೆಗಳು API v3 ಅನ್ನು ಹುಡುಕಿ, ನಂತರ ಅದನ್ನು ಆನ್ ಮಾಡಲು "OFF" ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ.
4. ನಿಯಮಗಳನ್ನು ಓದಿ ಮತ್ತು ಒಪ್ಪಿಕೊಳ್ಳಿ.
5. API ಗಳ ಕನ್ಸೋಲ್ಗೆ ಹೋಗಿ ಮತ್ತು ಎಡಗೈ ಮೆನುವಿನಿಂದ "API ಪ್ರವೇಶ" ಆಯ್ಕೆಮಾಡಿ
6. "ಸರಳ API ಪ್ರವೇಶ" ವಿಭಾಗದಲ್ಲಿ, "ಹೊಸ ಸರ್ವರ್ ಕೀಲಿ ರಚಿಸಿ ..." ಗುಂಡಿಯನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ.
7. ನಿಮ್ಮ ವೆಬ್ ಸರ್ವರ್ನ IP ವಿಳಾಸವನ್ನು ನಮೂದಿಸಿ. ಇದು ನಿಮ್ಮ ನಕ್ಷೆಗಳ ವಿನಂತಿಗಳಿಂದ ಬರುವ ಐಪಿ ಆಗಿದೆ. ನಿಮ್ಮ IP ವಿಳಾಸವನ್ನು ನಿಮಗೆ ತಿಳಿದಿಲ್ಲದಿದ್ದರೆ, ನೀವು ಅದನ್ನು ಹುಡುಕಬಹುದು.
8. "API ಕೀ:" ಸಾಲಿನಲ್ಲಿರುವ ಪಠ್ಯವನ್ನು ನಕಲಿಸಿ (ಆ ಶೀರ್ಷಿಕೆ ಸೇರಿದಂತೆ). ನಿಮ್ಮ ನಕ್ಷೆಗಳಿಗಾಗಿ ಇದು ನಿಮ್ಮ API ಕೀ.

05 ರ 02

ಕಕ್ಷೆಗಳು ನಿಮ್ಮ ವಿಳಾಸವನ್ನು ಪರಿವರ್ತಿಸಿ

ನಿಮ್ಮ ವೆಬ್ ಪುಟಗಳಲ್ಲಿ ಗೂಗಲ್ ನಕ್ಷೆಗಳನ್ನು ಬಳಸಲು, ಸ್ಥಳಕ್ಕಾಗಿ ಅಕ್ಷಾಂಶ ಮತ್ತು ರೇಖಾಂಶವನ್ನು ನೀವು ಹೊಂದಿರಬೇಕು. ನೀವು ಇದನ್ನು ಜಿಪಿಎಸ್ನಿಂದ ಪಡೆಯಬಹುದು ಅಥವಾ ನಿಮಗೆ ಹೇಳಲು Geocoder.us ನಂತಹ ಆನ್ ಲೈನ್ ಪರಿಕರವನ್ನು ಬಳಸಬಹುದು.

1. Geocoder.us ಗೆ ಹೋಗಿ ಮತ್ತು ನಿಮ್ಮ ವಿಳಾಸದಲ್ಲಿ ಹುಡುಕಾಟ ಬಾಕ್ಸ್ನಲ್ಲಿ ಟೈಪ್ ಮಾಡಿ.
2. ಅಕ್ಷಾಂಶದ ಮೊದಲ ಸಂಖ್ಯೆಯನ್ನು ನಕಲಿಸಿ (ಮುಂಭಾಗದಲ್ಲಿ ಪತ್ರವಿಲ್ಲದೆ) ಮತ್ತು ಪಠ್ಯ ಫೈಲ್ಗೆ ಅಂಟಿಸಿ. ನಿಮಗೆ ಪದವಿ (º) ಸೂಚಕ ಅಗತ್ಯವಿಲ್ಲ.
3. ರೇಖಾಂಶಕ್ಕಾಗಿ ಮೊದಲ ಸಂಖ್ಯೆಯನ್ನು ನಕಲಿಸಿ (ಮತ್ತೊಮ್ಮೆ ಮುಂದೆ ಪತ್ರ ಇಲ್ಲದೆಯೇ) ಮತ್ತು ಅದನ್ನು ನಿಮ್ಮ ಪಠ್ಯ ಫೈಲ್ಗೆ ಅಂಟಿಸಿ.

ನಿಮ್ಮ ಅಕ್ಷಾಂಶ ಮತ್ತು ರೇಖಾಂಶವು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

40.756076
-73.990838

Geocoder.us ಯುಎಸ್ ವಿಳಾಸಗಳಿಗಾಗಿ ಮಾತ್ರ ಕೆಲಸ ಮಾಡುತ್ತದೆ, ನೀವು ಇನ್ನೊಂದು ದೇಶದಲ್ಲಿ ಕಕ್ಷೆಗಳನ್ನು ಪಡೆದುಕೊಳ್ಳಬೇಕಾದರೆ, ನಿಮ್ಮ ಪ್ರದೇಶದಲ್ಲಿ ಇದೇ ಉಪಕರಣವನ್ನು ಹುಡುಕಬೇಕು.

05 ರ 03

ನಿಮ್ಮ ವೆಬ್ ಪುಟಕ್ಕೆ ನಕ್ಷೆ ಸೇರಿಸಲಾಗುತ್ತಿದೆ

ಮೊದಲು, ನಕ್ಷೆ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಸೇರಿಸಿ

ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್ನ

ನಿಮ್ಮ ವೆಬ್ ಪುಟವನ್ನು ತೆರೆಯಿರಿ ಮತ್ತು ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್ನ HEAD ಗೆ ಕೆಳಗಿನವುಗಳನ್ನು ಸೇರಿಸಿ.

ಹೈಲೈಟ್ ಮಾಡಿದ ಭಾಗವನ್ನು ನೀವು ಹಂತ 2 ರಲ್ಲಿ ಬರೆದಿರುವ ಅಕ್ಷಾಂಶ ಮತ್ತು ರೇಖಾಂಶದ ಸಂಖ್ಯೆಗೆ ಬದಲಾಯಿಸಿ.

ಎರಡನೆಯದು, ನಿಮ್ಮ ಪುಟಕ್ಕೆ ನಕ್ಷೆ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸೇರಿಸಿ

ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್ನ HEAD ಗೆ ಸೇರಿಸಿದ ಎಲ್ಲಾ ಸ್ಕ್ರಿಪ್ಟ್ ಅಂಶಗಳನ್ನು ನೀವು ಒಮ್ಮೆ ಹೊಂದಿಸಿದಲ್ಲಿ, ಪುಟದಲ್ಲಿ ನಿಮ್ಮ ನಕ್ಷೆಯನ್ನು ನೀವು ಇರಿಸಿಕೊಳ್ಳಬೇಕು. Id = "map-canvas" ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಒಂದು DIV ಅಂಶವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನೀವು ಇದನ್ನು ಮಾಡುತ್ತೀರಿ. ನಿಮ್ಮ ಪುಟದಲ್ಲಿ ಹೊಂದಿಕೊಳ್ಳುವ ಅಗಲ ಮತ್ತು ಎತ್ತರದೊಂದಿಗೆ ಈ DIV ಅನ್ನು ಸಹ ನಾನು ನಿಮಗೆ ಶಿಫಾರಸು ಮಾಡುತ್ತೇನೆ:

ಅಂತಿಮವಾಗಿ, ಅಪ್ಲೋಡ್ ಮತ್ತು ಟೆಸ್ಟ್

ಮಾಡಲು ಕೊನೆಯ ವಿಷಯ ನಿಮ್ಮ ಪುಟ ಅಪ್ಲೋಡ್ ಮತ್ತು ನಿಮ್ಮ ನಕ್ಷೆ ಪ್ರದರ್ಶನಗಳು ಪರೀಕ್ಷಿಸಲು ಆಗಿದೆ. ಪುಟದಲ್ಲಿ Google ನಕ್ಷೆಯ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ. ಸೂಚನೆ, ಏಕೆಂದರೆ, citation needed cosmos CMS ಕೃತಿಗಳು, ನಕ್ಷೆಯನ್ನು ಕಾಣಿಸಿಕೊಳ್ಳಲು ನೀವು ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಬೇಕು. ಇದು ನಿಮ್ಮ ಪುಟದ ವಿಷಯವಲ್ಲ.

ನಿಮ್ಮ ನಕ್ಷೆ ತೋರಿಸದಿದ್ದರೆ, ಅದನ್ನು BODY ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಲು ಪ್ರಯತ್ನಿಸಿ:

onload = "ಆರಂಭಿಸಲು ()" >

ನಿಮ್ಮ ನಕ್ಷೆಯು ಲೋಡ್ ಆಗುತ್ತಿಲ್ಲವೇ ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸಲು ಇತರ ವಿಷಯಗಳು ಸೇರಿವೆ:

• ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಕೇಸ್ ಸೇರಿದಂತೆ ಟೈಪೊಸ್ಗಳನ್ನು ನೋಡಿ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೇಸ್ ಸೆನ್ಸಿಟಿವ್ ಆಗಿದೆ.
• ನೀವು ಝೂಮ್ ಮತ್ತು ಸೆಂಟರ್ ಆಯ್ಕೆಗಳನ್ನು ಹೊಂದಿದ್ದೀರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ನಿಮ್ಮ DIV ಅಂಶವು ಸರಿಯಾದ ID ಯೊಂದಿಗೆ ಪುಟದಲ್ಲಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ನಿಮ್ಮ DIV ಅಂಶವು ಎತ್ತರವನ್ನು ಹೊಂದಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

05 ರ 04

ನಿಮ್ಮ ನಕ್ಷೆಗೆ ಮಾರ್ಕರ್ ಸೇರಿಸಿ

ಆದರೆ ಜನರು ಎಲ್ಲಿಗೆ ಹೋಗಬೇಕೆಂದು ಜನರಿಗೆ ಹೇಳುವ ಮಾರ್ಕರ್ ಇಲ್ಲದಿದ್ದರೆ ನಿಮ್ಮ ಸ್ಥಳದ ನಕ್ಷೆಯು ಯಾವುದು ಉತ್ತಮ?

ಪ್ರಮಾಣಿತ ಗೂಗಲ್ ನಕ್ಷೆಗಳು ಕೆಂಪು ಮಾರ್ಕರ್ ಅನ್ನು ಸೇರಿಸಲು ವರ್ಪ್ ಮ್ಯಾಪ್ = ... ಲೈನ್ ಕೆಳಗೆ ನಿಮ್ಮ ಸ್ಕ್ರಿಪ್ಟ್ಗೆ ಕೆಳಗಿನವುಗಳನ್ನು ಸೇರಿಸಿ:

var myLatlng = ಹೊಸ google.maps.LatLng ( ಅಕ್ಷಾಂಶ, ರೇಖಾಂಶ );
ವರ್ ಮಾರ್ಕರ್ = ಹೊಸ google.maps.Marker ({
ಸ್ಥಾನ: myLatlng,
ನಕ್ಷೆ: ನಕ್ಷೆ,
ಶೀರ್ಷಿಕೆ: " ಮಾಜಿ ಮುಖ್ಯಸ್ಥರು "
});

ಹೈಲೈಟ್ ಮಾಡಲಾದ ಪಠ್ಯವನ್ನು ನಿಮ್ಮ ಅಕ್ಷಾಂಶ ಮತ್ತು ರೇಖಾಂಶಕ್ಕೆ ಬದಲಿಸಿ ಮತ್ತು ಮಾರ್ಕರ್ ಮೇಲೆ ಜನರು ಹರಿದಾಗ ನೀವು ಕಾಣಿಸಿಕೊಳ್ಳುವ ಶೀರ್ಷಿಕೆ.

ನೀವು ಇಷ್ಟಪಡುವಂತೆ ನೀವು ಅನೇಕ ಮಾರ್ಕರ್ಗಳನ್ನು ಪುಟಕ್ಕೆ ಸೇರಿಸಬಹುದು, ಹೊಸ ಕಕ್ಷೆಗಳು ಮತ್ತು ಶೀರ್ಷಿಕೆಯೊಂದಿಗೆ ಹೊಸ ಅಸ್ಥಿರಗಳನ್ನು ಸೇರಿಸಿ, ಆದರೆ ನಕ್ಷೆಯು ಎಲ್ಲಾ ಮಾರ್ಕರ್ಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ತುಂಬಾ ಚಿಕ್ಕದಾದರೆ, ರೀಡರ್ ಜೂಮ್ಗಳನ್ನು ಹೊರತುಪಡಿಸಿ ಅವು ತೋರಿಸುವುದಿಲ್ಲ.

var latlng 2 = ಹೊಸ google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = ಹೊಸ google.maps.Marker ({
ಸ್ಥಾನ: latlng 2 ,
ನಕ್ಷೆ: ನಕ್ಷೆ,
ಶೀರ್ಷಿಕೆ: " ಆಪಲ್ ಕಂಪ್ಯೂಟರ್ "
});

ಮಾರ್ಕರ್ನೊಂದಿಗೆ Google ನಕ್ಷೆಯ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ. ಸೂಚನೆ, ಏಕೆಂದರೆ, citation needed cosmos CMS ಕೃತಿಗಳು, ನಕ್ಷೆಯನ್ನು ಕಾಣಿಸಿಕೊಳ್ಳಲು ನೀವು ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಬೇಕು. ಇದು ನಿಮ್ಮ ಪುಟದ ವಿಷಯವಲ್ಲ.

05 ರ 05

ನಿಮ್ಮ ಪುಟಕ್ಕೆ ಎರಡನೇ (ಅಥವಾ ಹೆಚ್ಚು) ನಕ್ಷೆ ಸೇರಿಸಿ

ನೀವು ನನ್ನ ಉದಾಹರಣೆಯಲ್ಲಿ ಗೂಗಲ್ ನಕ್ಷೆಗಳ ಪುಟವನ್ನು ನೋಡಿದಲ್ಲಿ ಪುಟದಲ್ಲಿ ನಾನು ಪ್ರದರ್ಶಿಸಿದ ಒಂದಕ್ಕಿಂತ ಹೆಚ್ಚು ಮ್ಯಾಪ್ಗಳನ್ನು ಹೊಂದಿರುವಿರಿ ಎಂದು ನೀವು ಗಮನಿಸಬಹುದು. ಇದು ಮಾಡಲು ತುಂಬಾ ಸುಲಭ. ಇಲ್ಲಿ ಹೇಗೆ.

1. ಈ ಟ್ಯುಟೋರಿಯಲ್ ಹಂತ 2 ರಲ್ಲಿ ನಾವು ಕಲಿತಂತೆ ನೀವು ಪ್ರದರ್ಶಿಸಲು ಬಯಸುವ ಎಲ್ಲಾ ನಕ್ಷೆಗಳ ಅಕ್ಷಾಂಶ ಮತ್ತು ರೇಖಾಂಶವನ್ನು ಪಡೆಯಿರಿ.
2. ಈ ಟ್ಯುಟೋರಿಯಲ್ ಹಂತ 3 ರಲ್ಲಿ ನಾವು ಕಲಿತಂತೆ ಮೊದಲ ಮ್ಯಾಪ್ ಅನ್ನು ಸೇರಿಸಿ. ನಕ್ಷೆಯು ಮಾರ್ಕರ್ ಹೊಂದಲು ನೀವು ಬಯಸಿದರೆ, ಮಾರ್ಕರ್ ಅನ್ನು ಹಂತ 4 ರಲ್ಲಿ ಸೇರಿಸಿ.
3. ಎರಡನೆಯ ನಕ್ಷೆಗಾಗಿ, ನಿಮ್ಮ ಆರಂಭಿಕ () ಸ್ಕ್ರಿಪ್ಟ್ಗೆ ನೀವು 3 ಹೊಸ ಸಾಲುಗಳನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ:
   var latlng2 = ಹೊಸ google.maps.LatLng ( ಎರಡನೇ ಕಕ್ಷೆಗಳು );
   var myOptions2 = {ಜೂಮ್: 18, ಸೆಂಟರ್: ಲಾಟ್ಲಂಗ್ 2, ಮ್ಯಾಪ್ಟೈಪ್ಐಡಿ: google.maps.MapTypeId.ROADMAP};
   var map2 = new google.maps.map (document.getElementById ("map_canvas_2"), myOptions2);
4. ಹೊಸ ಮ್ಯಾಪ್ನಲ್ಲಿ ಮಾರ್ಕರ್ ಅನ್ನು ಸಹ ನೀವು ಬಯಸಿದರೆ, ಎರಡನೆಯ ನಿರ್ದೇಶಕ ಮತ್ತು ಎರಡನೇ ನಕ್ಷೆಯಲ್ಲಿ ಎರಡನೇ ಮಾರ್ಕರ್ ಅನ್ನು ಸೂಚಿಸಿ:
   var myMarker2 = ಹೊಸ google.maps.Marker (ಸ್ಥಾನ: latlng2 , ನಕ್ಷೆ: map2 , ಶೀರ್ಷಿಕೆ: " ನಿಮ್ಮ ಮಾರ್ಕರ್ ಶೀರ್ಷಿಕೆ "});
5. ನಂತರ ಎರಡನೇ ಸೇರಿಸಿ

   ಅಲ್ಲಿ ನೀವು ಎರಡನೇ ನಕ್ಷೆಯನ್ನು ಬಯಸುತ್ತೀರಿ. ಮತ್ತು ಇದು ಐಡಿ = "map_canvas_2" ID ಯನ್ನು ನೀಡಲು ಮರೆಯದಿರಿ.

6. ನಿಮ್ಮ ಪುಟ ಲೋಡ್ ಮಾಡುವಾಗ, ಎರಡು ನಕ್ಷೆಗಳು ಪ್ರದರ್ಶಿಸುತ್ತದೆ

ಇಲ್ಲಿ ಎರಡು Google ನಕ್ಷೆಗಳಿರುವ ಪುಟದ ಕೋಡ್ ಇಲ್ಲಿದೆ: