మీ సైట్ కోసం Google Maps API కీని పొందండి
Google Maps API ను ఉపయోగించడం మీ వెబ్ సైట్కు గూగుల్ మాప్ ను జోడించడం ఉత్తమ మార్గం. మరియు మ్యాప్లను ఉపయోగించడానికి మీరు API కీని పొందాలని Google సిఫార్సు చేస్తుంది.
మీరు Google Maps API v3 ను ఉపయోగించడానికి ఒక API కీని పొందవలసిన అవసరం లేదు, కానీ మీ వినియోగాన్ని పర్యవేక్షించడానికి మరియు అదనపు ప్రాప్యత కోసం చెల్లించడానికి ఇది చాలా ఉపయోగకరంగా ఉంటుంది. గూగుల్ మ్యాప్స్ API v3 వినియోగదారుకు సెకనుకు ఒక అభ్యర్థన యొక్క 1 కోటాను రోజుకి 25,000 అభ్యర్ధనల గరిష్టంగా కలిగి ఉంది. మీ పేజీలు ఆ పరిమితులను దాటిస్తే మీరు మరింత పొందడానికి బిల్లింగ్ను ప్రారంభించాలి.
Google మ్యాప్స్ API కీని ఎలా పొందాలో
- మీ Google ఖాతాను ఉపయోగించి Google కు లాగిన్ అవ్వండి.
- డెవలపర్స్ కన్సోల్కి వెళ్లండి
- జాబితా ద్వారా స్క్రోల్ చేయండి మరియు Google Maps API v3 ను కనుగొని, దాన్ని ఆన్ చేయడానికి "OFF" బటన్ క్లిక్ చేయండి.
- నిబంధనలను చదివి, అంగీకరిస్తున్నాను.
- API కన్సోల్లోకి వెళ్ళండి మరియు ఎడమ చేతి మెను నుండి "API ప్రాప్యత" ఎంచుకోండి
- "సింపుల్ API యాక్సెస్" విభాగంలో, "కొత్త సర్వర్ కీ సృష్టించు …" బటన్పై క్లిక్ చేయండి.
- మీ వెబ్ సర్వర్ యొక్క IP చిరునామాను నమోదు చేయండి. ఇది మీ మ్యాప్స్ అభ్యర్థనల నుండి వస్తున్న IP. మీకు మీ IP చిరునామా తెలియకపోతే, దాన్ని చూడవచ్చు.
- టెక్స్ట్ను "API కీ:" పంక్తిలో (ఆ శీర్షికతో సహా) కాపీ చేయండి. ఇది మీ మ్యాప్లకు మీ API కీ.
సమన్వయాలకు మీ చిరునామాని మార్చండి
మీ వెబ్ పేజీలలో Google Maps ను ఉపయోగించడానికి, మీరు స్థానానికి అక్షాంశం మరియు రేఖాంశం ఉండాలి. మీరు GPS నుండి ఈ పొందవచ్చు లేదా మీరు చెప్పండి Geocoder.us వంటి ఆన్లైన్ సాధనం ఉపయోగించవచ్చు.
- శోధన పెట్టెలో మీ చిరునామాలో Geocoder.us కు వెళ్లండి మరియు టైప్ చేయండి.
- అక్షరానికి మొదటి సంఖ్యను (ముందుగా ఒక లేఖ లేకుండా) కాపీ చేసి, దానిని ఒక టెక్స్ట్ ఫైల్గా అతికించండి. మీరు డిగ్రీ (º) సూచిక అవసరం లేదు.
- లాంగిట్యూడ్ కోసం మొదటి నంబర్ను కాపీ చేయండి (మళ్ళీ ముందుగా ఒక లేఖ లేకుండా) మరియు మీ టెక్స్ట్ ఫైల్లో అతికించండి.
మీ అక్షాంశం మరియు రేఖాంశం ఇలా కనిపిస్తుంది:
40.756076-73.990838
Geocoder.us మాత్రమే సంయుక్త చిరునామాలు కోసం పనిచేస్తుంది, మీరు మరొక దేశంలో కోఆర్డినేట్లు పొందాలి ఉంటే, మీరు మీ ప్రాంతంలో ఇదే సాధనం కోసం వెతకాలి.
03 లో 05మీ వెబ్ పేజీకి మ్యాప్ కలుపుతోంది
మొదట, మాప్ స్క్రిప్ట్ ను జోడించండి
మీ పత్రం యొక్క
మీ వెబ్ పేజీని తెరవండి మరియు కింది వాటిని జోడించండి HEAD మీ పత్రం.
హైలైట్ చేసిన భాగాన్ని దశ రెండు లో వ్రాసిన అక్షాంశం మరియు రేఖాంశ సంఖ్యలకు మార్చండి.
రెండవది, మ్యాప్ ఎలిమెంట్ను మీ పేజ్కు జోడించండి
మీరు అన్ని స్క్రిప్ట్ అంశాలకు జోడించిన తర్వాత HEAD మీ పత్రం యొక్క, మీరు మీ మ్యాప్ను పేజీలో ఉంచాలి. మీరు దీన్ని జోడించడం ద్వారా దీన్ని చేయండి DIV తో మూలకం id = "మాప్ కాన్వాస్" గుణం. నేను కూడా మీరు మీ పేజీలో సరిపోయే వెడల్పు మరియు ఎత్తు ఈ DIV శైలి సిఫార్సు:
చివరగా, అప్లోడ్ చేసి పరీక్షించండి
మీ గత పేజీ మీ పేజీని అప్లోడ్ చేసి, మీ మ్యాప్ ప్రదర్శించే పరీక్ష. ఇక్కడ పేజీలోని Google మ్యాప్ యొక్క ఒక ఉదాహరణ. గమనిక, ఎందుకంటే ingcaba.tk CMS పనిచేస్తుంది, మీరు చిహ్నం కనిపించడానికి ఒక లింక్ క్లిక్ ఉంటుంది. ఇది మీ పేజీలో ఉండదు.
మీ మ్యాప్ కనిపించకపోతే, దానిని ప్రారంభించడం ప్రయత్నించండి BODY గుణం:
onload = "ప్రారంభించడం ()" >
మీ మ్యాప్ లోడ్ కానట్లయితే తనిఖీ చేయవలసిన ఇతర విషయాలు:
- కేసుతో సహా, మీ జావాస్క్రిప్ట్లో అక్షరదోషాలు చూడండి. జావాస్క్రిప్ట్ కేస్ సెన్సిటివ్.
- మీకు ఉన్నట్లు నిర్ధారించుకోండి
జూమ్మరియుసెంటర్సెట్ ఎంపికలు. - మీ నిర్ధారించుకోండి
DIVసరైన ID తో పేజీలో ఉంది. - మీ నిర్ధారించుకోండి
DIVమూలకం ఎత్తు ఉంది.
మీ మ్యాప్కు మార్కర్ను జోడించండి
కానీ వారు వెళ్లవలసిన వ్యక్తులకు మార్కర్ లేనట్లయితే మీ స్థానం యొక్క మ్యాప్ ఏది మంచిది?
ఒక ప్రామాణిక Google మ్యాప్స్ రెడ్ మార్కర్ను జోడించడానికి క్రింద మీ స్క్రిప్ట్కు క్రింద చేర్చండి var map = … లైన్:
var myLatlng = కొత్త google.maps.LatLng ( అక్షాంశం, రేఖాంశం );var మార్కర్ = కొత్త google.maps.Marker ({స్థానం: myLatlng,చిహ్నం: పటం,శీర్షిక: " మాజీ ingcaba.tk ప్రధాన కార్యాలయం '});
హైలైట్ చేసిన వచనాన్ని మీ అక్షాంశం మరియు రేఖాంశంలో మార్చండి మరియు వ్యక్తులు మార్కర్లో హోవర్ చేసినప్పుడు మీరు కనిపించాలనుకుంటున్న శీర్షికను మార్చండి.
మీకు నచ్చిన పేజీలో మీరు అనేక మార్కర్లను జోడించవచ్చు, క్రొత్త అక్షాంశాలను మరియు శీర్షికలతో క్రొత్త వేరియబుల్స్ని జోడించవచ్చు, కానీ అన్ని గుర్తులను ప్రదర్శించడానికి మ్యాప్ చాలా చిన్నదిగా ఉంటే, రీడర్ జూమ్ చేయకపోతే అవి ప్రదర్శించవు.
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 మ్యాప్స్ పేజీని చూస్తే, నేను పేజీలో ప్రదర్శించబడే ఒకటి కంటే ఎక్కువ మ్యాప్ కలిగి ఉన్నారని గమనించండి. ఇది చాలా సులభం. ఇక్కడ ఎలా ఉంది.
- ఈ ట్యుటోరియల్ యొక్క దశ 2 లో మేము నేర్చుకున్న అన్ని మాప్ ల యొక్క అక్షాంశం మరియు రేఖాంశం పొందండి.
- ఈ ట్యుటోరియల్ యొక్క స్టెప్ 3 లో మేము నేర్చుకున్న మొదటి మ్యాప్ను చొప్పించండి. మ్యాప్ మార్కర్ను కలిగి ఉండాలని మీరు కోరుకుంటే, మార్కర్ను దశ 4 లో చేర్చండి.
- రెండవ మ్యాప్ కోసం, మీరు మీ ప్రారంభించు () లిపికి 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); - మీరు కొత్త మ్యాప్లో కూడా మార్కర్ కావాలనుకుంటే, రెండో అక్షాంశానికీ రెండవ మ్యాప్లోనూ రెండవ మార్కర్ను సూచించండి:
var myMarker2 = కొత్త google.maps.Marker ({position: latlng2 , మ్యాప్: map2 , టైటిల్: " మీ మార్కర్ శీర్షిక ' }); - అప్పుడు రెండో మ్యాప్ను మీరు రెండో మ్యాప్ వేయండి. మరియు అది ఒక ఇవ్వాలని ఖచ్చితంగా
id = "map_canvas_2"ID. - మీ పేజీ లోడ్ అయినప్పుడు, రెండు మ్యాప్లు ప్రదర్శించబడతాయి
ఇక్కడ రెండు గూగుల్ పటాలు ఉన్న పేజీ యొక్క కోడ్ ఇది:
