మీ వెబ్ పేజీకి Google Map ను ఎలా జోడించాలి

01 నుండి 05

మీ సైట్ కోసం Google Maps API కీని పొందండి

Google Maps API ను ఉపయోగించడం మీ వెబ్ సైట్కు గూగుల్ మాప్ ను జోడించడం ఉత్తమ మార్గం. మరియు మ్యాప్లను ఉపయోగించడానికి మీరు API కీని పొందాలని Google సిఫార్సు చేస్తుంది.

మీరు Google Maps API v3 ను ఉపయోగించడానికి ఒక API కీని పొందవలసిన అవసరం లేదు, కానీ మీ వినియోగాన్ని పర్యవేక్షించడానికి మరియు అదనపు ప్రాప్యత కోసం చెల్లించడానికి ఇది చాలా ఉపయోగకరంగా ఉంటుంది. గూగుల్ మ్యాప్స్ API v3 వినియోగదారుకు సెకనుకు ఒక అభ్యర్థన యొక్క 1 కోటాను రోజుకి 25,000 అభ్యర్ధనల గరిష్టంగా కలిగి ఉంది. మీ పేజీలు ఆ పరిమితులను దాటిస్తే మీరు మరింత పొందడానికి బిల్లింగ్ను ప్రారంభించాలి.

Google మ్యాప్స్ API కీని ఎలా పొందాలో

1. మీ Google ఖాతాను ఉపయోగించి Google కు లాగిన్ అవ్వండి.
2. డెవలపర్స్ కన్సోల్కి వెళ్లండి
3. జాబితా ద్వారా స్క్రోల్ చేయండి మరియు Google Maps API v3 ను కనుగొని, దాన్ని ఆన్ చేయడానికి "OFF" బటన్ క్లిక్ చేయండి.
4. నిబంధనలను చదివి, అంగీకరిస్తున్నాను.
5. API కన్సోల్లోకి వెళ్ళండి మరియు ఎడమ చేతి మెను నుండి "API ప్రాప్యత" ఎంచుకోండి
6. "సింపుల్ API యాక్సెస్" విభాగంలో, "కొత్త సర్వర్ కీ సృష్టించు ..." బటన్పై క్లిక్ చేయండి.
7. మీ వెబ్ సర్వర్ యొక్క IP చిరునామాను నమోదు చేయండి. ఇది మీ మ్యాప్స్ అభ్యర్థనల నుండి వస్తున్న IP. మీకు మీ IP చిరునామా తెలియకపోతే, దాన్ని చూడవచ్చు.
8. టెక్స్ట్ను "API కీ:" పంక్తిలో (ఆ శీర్షికతో సహా) కాపీ చేయండి. ఇది మీ మ్యాప్లకు మీ API కీ.

02 యొక్క 05

సమన్వయాలకు మీ చిరునామాని మార్చండి

మీ వెబ్ పేజీలలో Google Maps ను ఉపయోగించడానికి, మీరు స్థానానికి అక్షాంశం మరియు రేఖాంశం ఉండాలి. మీరు GPS నుండి ఈ పొందవచ్చు లేదా మీరు చెప్పండి Geocoder.us వంటి ఆన్లైన్ సాధనం ఉపయోగించవచ్చు.

1. శోధన పెట్టెలో మీ చిరునామాలో Geocoder.us కు వెళ్లండి మరియు టైప్ చేయండి.
2. అక్షరానికి మొదటి సంఖ్యను (ముందుగా ఒక లేఖ లేకుండా) కాపీ చేసి, దానిని ఒక టెక్స్ట్ ఫైల్గా అతికించండి. మీరు డిగ్రీ (º) సూచిక అవసరం లేదు.
3. లాంగిట్యూడ్ కోసం మొదటి నంబర్ను కాపీ చేయండి (మళ్ళీ ముందుగా ఒక లేఖ లేకుండా) మరియు మీ టెక్స్ట్ ఫైల్లో అతికించండి.

మీ అక్షాంశం మరియు రేఖాంశం ఇలా కనిపిస్తుంది:

40.756076
-73,990838

Geocoder.us మాత్రమే సంయుక్త చిరునామాల కోసం పనిచేస్తుంది, మీరు మరొక దేశంలో అక్షాంశాలు పొందుటకు అవసరం ఉంటే, మీరు మీ ప్రాంతంలో ఇటువంటి సాధనం కోసం శోధించండి ఉండాలి.

03 లో 05

మీ వెబ్ పేజీకి మ్యాప్ కలుపుతోంది

మొదట, మాప్ స్క్రిప్ట్ ను జోడించండి

మీ పత్రం యొక్క

మీ వెబ్ పేజీని తెరవండి మరియు మీ పత్రం యొక్క HEAD కు క్రింది వాటిని జోడించండి.

హైలైట్ చేసిన భాగాన్ని దశ రెండు లో వ్రాసిన అక్షాంశం మరియు రేఖాంశ సంఖ్యలకు మార్చండి.

రెండవది, మ్యాప్ ఎలిమెంట్ను మీ పేజ్కు జోడించండి

ఒకసారి మీరు మీ పత్రం యొక్క HEAD కు జోడించిన అన్ని స్క్రిప్ట్ ఎలిమెంట్లను కలిగి ఉంటే, మీరు పేజీలో మీ మ్యాప్ని ఉంచాలి. మీరు ఒక DIV జోడించడం ద్వారా దీన్ని చేయండి id = "map-canvas" లక్షణంతో మూలకం. నేను కూడా మీరు మీ పేజీలో సరిపోయే వెడల్పు మరియు ఎత్తు ఈ DIV శైలి సిఫార్సు:

చివరగా, అప్లోడ్ చేసి పరీక్షించండి

మీ గత పేజీ మీ పేజీని అప్లోడ్ చేసి, మీ మ్యాప్ ప్రదర్శించే పరీక్ష. ఇక్కడ పేజీలోని Google మ్యాప్ యొక్క ఒక ఉదాహరణ. గమనిక, ఎందుకంటే ingcaba.tk CMS పనిచేస్తుంది, మీరు చిహ్నం కనిపించడానికి ఒక లింక్ క్లిక్ ఉంటుంది. ఇది మీ పేజీలో ఉండదు.

మీ మ్యాప్ కనిపించకపోతే, దీనిని BODY లక్షణంతో ప్రారంభించండి:

onload = "ప్రారంభించు ()" >

మీ మ్యాప్ లోడ్ కానట్లయితే తనిఖీ చేయవలసిన ఇతర విషయాలు:

• కేసుతో సహా, మీ జావాస్క్రిప్ట్లో అక్షరదోషాలు చూడండి. జావాస్క్రిప్ట్ కేస్ సెన్సిటివ్.
• మీరు జూమ్ మరియు కేంద్రాన్ని సెటప్ సెట్స్ను కలిగి ఉన్నారని నిర్ధారించుకోండి.
• మీ DIV మూలకం సరైన ID తో పేజీలో ఉందని నిర్ధారించుకోండి.
• నిర్ధారించుకోండి మీ DIV ఎలిమెంట్ ఒక ఎత్తు ఉంది.

04 లో 05

మీ మ్యాప్కు మార్కర్ను జోడించండి

కానీ వారు వెళ్లవలసిన వ్యక్తులకు మార్కర్ లేనట్లయితే మీ స్థానం యొక్క మ్యాప్ ఏది మంచిది?

ఒక ప్రామాణిక Google మ్యాప్స్ రెడ్ మార్కర్ను జోడించేందుకు మీ మ్యాప్ను క్రింద ఉన్న మ్యాప్ = ... పంక్తికి క్రింద చేర్చండి:

var myLatlng = కొత్త google.maps.LatLng ( అక్షాంశం, రేఖాంశం );
var మార్కర్ = కొత్త google.maps.Marker ({
స్థానం: myLatlng,
చిహ్నం: పటం,
టైటిల్: " మాజీ ఫస్ట్ ఎడ్యూట్ హెడ్ క్వార్టర్స్ "
});

హైలైట్ చేసిన వచనాన్ని మీ అక్షాంశం మరియు రేఖాంశంలో మార్చండి మరియు వ్యక్తులు మార్కర్లో హోవర్ చేసినప్పుడు మీరు కనిపించాలనుకుంటున్న శీర్షికను మార్చండి.

మీకు నచ్చిన పేజీలో మీరు అనేక మార్కర్లను జోడించవచ్చు, క్రొత్త అక్షాంశాలను మరియు శీర్షికలతో క్రొత్త వేరియబుల్స్ని జోడించవచ్చు, కానీ అన్ని గుర్తులను ప్రదర్శించడానికి మ్యాప్ చాలా చిన్నదిగా ఉంటే, రీడర్ జూమ్ చేయకపోతే అవి ప్రదర్శించవు.

var latlng 2 = కొత్త google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = కొత్త google.maps.Marker ({
స్థానం: latlng 2 ,
చిహ్నం: పటం,
టైటిల్: " ఆపిల్ కంప్యూటర్ "
});

మార్కర్తో Google మ్యాప్ యొక్క ఉదాహరణ ఇక్కడ ఉంది. గమనిక, ఎందుకంటే ingcaba.tk CMS పనిచేస్తుంది, మీరు చిహ్నం కనిపించడానికి ఒక లింక్ క్లిక్ చేయాలి. ఇది మీ పేజీలో ఉండదు.

05 05

మీ పేజీకి రెండవ (లేదా మరిన్ని) మ్యాప్ని జోడించండి

మీరు నా ఉదాహరణ Google మ్యాప్స్ పేజీని చూస్తే, నేను పేజీలో ప్రదర్శించబడే ఒకటి కంటే ఎక్కువ మ్యాప్ కలిగి ఉన్నారని గమనించండి. ఇది చాలా సులభం. ఇక్కడ ఎలా ఉంది.

1. ఈ ట్యుటోరియల్ యొక్క దశ 2 లో మేము నేర్చుకున్న అన్ని మాప్ ల యొక్క అక్షాంశం మరియు రేఖాంశం పొందండి.
2. ఈ ట్యుటోరియల్ యొక్క స్టెప్ 3 లో మేము నేర్చుకున్న మొదటి మ్యాప్ను చొప్పించండి. మ్యాప్ మార్కర్ను కలిగి ఉండాలని మీరు కోరుకుంటే, మార్కర్ను దశ 4 లో చేర్చండి.
3. రెండవ మ్యాప్ కోసం, మీరు మీ ప్రారంభించు () లిపికి 3 కొత్త పంక్తులను జోడించాలి:
   var latlng2 = కొత్త google.maps.LatLng ( రెండవ అక్షాంశాలు );
   var myOptions2 = {zoom: 18, సెంటర్: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = కొత్త google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. మీరు కొత్త మ్యాప్లో కూడా మార్కర్ కావాలనుకుంటే, రెండో అక్షాంశానికీ రెండవ మ్యాప్లోనూ రెండవ మార్కర్ను సూచించండి:
   var myMarker2 = కొత్త google.maps.Marker ({position: latlng2 , పటం: map2 , శీర్షిక: " మీ మార్కర్ శీర్షిక "});
5. అప్పుడు రెండవదాన్ని జోడించండి

   మీకు రెండవ మ్యాప్ కావాలి. మరియు అది ఒక id = "map_canvas_2" ID ని ఇవ్వాలని నిర్ధారించుకోండి.

6. మీ పేజీ లోడ్ అయినప్పుడు, రెండు మ్యాప్లు ప్రదర్శించబడతాయి

ఇక్కడ రెండు గూగుల్ పటాలు ఉన్న పేజీ యొక్క కోడ్ ఇది: