Pehea e Hoʻohui i kahi Palapala'āina Google i kāu Pūnaewele Pūnaewele

01 o 05

E kiʻi iā Google API Key no kāu Pūnaewele

ʻO ke ala maikaʻi e hoʻohui i ka palapala'āina Google ma kāu pūnaewele e hoʻohana i Google Maps API. A ke'ōlelo neiʻo Google e loaʻa iāʻoe kahi kī API no ka hoʻohanaʻana i nā palapala'āina.

ʻAʻoleʻoe e koiʻia e loaʻa kahi kī API e hoʻohana i Google Maps API v3, akā he mea maikaʻi loa ia e hiki ai iāʻoe ke nānā i kāu hana a e uku no ke ala hou. Pākuʻi Google API v3 i kahi o 1 noi no kēlā me kēia kalani no kēlā me kēia kanaka hoʻohana i ka maximum o 25,000 noi ma ka lā. Inā 'oi aku kou mauʻaoʻao ma mua o nā palena āu e pono ai e hiki ai i ka bilakini kālā ke loaʻa hou.

Pehea e loaʻa ai kahi Google Maps API Key

1. E hoʻokomo i Google ma kāu moʻokāki Google.
2. E hele i nā mea hoʻolālā Developers
3. E kaomi ma ka papa inoa a e huli i ka Google Maps API v3, a laila kaomi i ke pihi "PA" no ka hoʻololiʻana.
4. E heluhelu ae'āpono i nā hua'ōlelo.
5. E hele i ka punaewele API a koho i "API Access" mai kaʻaoʻao hema
6. Ma ka'āpana "Simple API Access"ʻaoʻao, e kaomi i ka pākuhi "Create new key key ...".
7. E komo i ka helu IP o kāu pūnaewele pūnaewele. ʻO kēia ke IP kahi e hoʻounaʻia ai kāu mau palapala Mālama. Ināʻaʻoleʻoe iʻike i kāu IP helu, hiki iāʻoe ke nānā iā ia.
8. E kāpili i ka kikokikona ma ka "API kī:" laina (ʻaʻole me kēlā inoa). ʻO kēia kāu palapala API no kāu mau palapala'āina.

02 o 05

E hoʻololi i kāu mau inoa i kahi hui

No ka hoʻohanaʻana i nā Palapala'āina Google ma kāu mau pūnaewele, ponoʻoe e loaʻa ka latitude a me ka longitude no kahi. Hiki iāʻoe ke loaʻa kēia mau mea mai ka GPS a iʻole hiki iāʻoe ke hoʻohana i ka mea hana pūnaewele e like me Geocoder.us e haʻi iāʻoe.

1. E hele i Geocoder.us a e hoʻokomo i kāu helu ma ka pahu hulina.
2. E kope i ka helu mua no ka latitude (me kaʻole o ka leka i mua) a pasi i kahi kikokikona. ʻAʻoleʻoe e pono i ka hōʻailona (º).
3. E kope i ka helu mua no ka longitude (me kaʻole he leka i mua) a pasi i loko o kāu pūnaewele.

ʻO kou latitude a longitude ka mea e like me kēia:

40.756076
-73.990838

ʻO Geocoder.us wale nō kahi hana no nā wahi US, inā ponoʻoe e loaʻa nā kaukaina ma kekahi'āina'ē aʻe, ponoʻoe e huli i kahi mea hana like i kāu'āina.

03 o 05

Hoʻohui i ka Palapala'āina i kāu Pūnaewele Pūnaewele

ʻO ka mua, e hoʻonui i ka Hōʻolā Palapala Palapala i ka

o kāu palapala

E wehe i kāu pūnaewele pūnaewele a hoʻohui i kēia i ka HEAD o kāu palapala.

E hoʻololi i ka mahele iʻikeʻia i nā latitude a me nā loloa longitude āu i kākau ai ma ka papaʻelua.

ʻO ka lua, e hoʻonui i ka palapala'āina i kāu palapala

Aia a loaʻa iāʻoe nāʻano kikowaena i hoʻopiliʻia i ka HEAD o kāu palapala, ponoʻoe e hoʻonoho i kāu palapala'āina ma kaʻaoʻao. Hanaʻoe i kēia ma ka hoʻoukaʻana i kahi hua DIV me ka id = "kahi'āina-canvas" inoa. Ke hāpai iāʻoe e pena i kēia māhele me ka laulā a me ke kiʻekiʻe e hoʻokomo i kāuʻaoʻao:

Ma hope, Hoʻouna a Test

ʻO ka mea hope loa e hana, e hoʻouna i kāuʻaoʻao a hōʻoia i kāu hōʻike palapala'āina. Eia keʻano o kahi palapala Google ma kaʻaoʻao. E hoʻomaopopo, no ka hana a ka About.com CMS, ponoʻoe e kaomi i kahi loulou e kiʻi i ka palapala'āina. ʻAʻole kēia ka hihia ma kāuʻaoʻao.

Inā hōʻikeʻole kāu palapala'āina, e ho'āʻo i ka hoʻomakaʻana me kahi huaʻona BODY:

onload = "hoʻomaka i ()" >

Nā mea'ē aʻe e nānā ināʻaʻole i kālekaʻia kāu palapala'āina penei:

• E nānā i ka hihia i kāu JavaScript, a me ka hihia. ʻO JavaScript ka hihia hihia.
• E hōʻoia i kou hihihihi a me kahi koho koho.
• E hōʻoia i kāuʻaoʻao DIV ma kaʻaoʻao me ka helu pololei.
• E hōʻoia i ka kiʻekiʻe o kāu mea DIV.

04 o 05

E hoʻouka i kahi hōʻailona ma kāu palapala'āina

He aha ka maikaʻi o ka palapala'āina o kāu wahi ināʻaʻole he mark e haʻi ana i nā kānaka i kahi e hele ai lākou?

E hoʻohui i kahi hōʻailona polina Google Maps e hoʻohui i kēia i kāu palapala ma lalo o ka var map = ... laina:

ʻoluʻolu myLatlng = hou google.maps.LatLng ( latitude, longitude );
ʻoluʻolu mark = hou google.maps.Marker ({
wahi: myLatlng,
palapala'āina: palapala'āina,
poʻo inoa: " Former About.com Headquarters "
});

E hoʻololi i ka kikokikona i kuhiʻia i kou latitude a longitude a me ke poʻo e makemakeʻoe eʻike i ka wā e paʻi ai nā kānaka i ka marker.

Hiki iāʻoe ke hoʻohui i nā hōʻailona nui i kaʻaoʻao e like me kou makemake, e hoʻopili hou i nā mea hou me nā luna a me nā poʻo inoa hou, akā inā heʻuʻuku ka palapala'āina e hōʻike i nā'ōmeka a pau,ʻaʻole lākou e hōʻike ma waho ke kikoo ka mea heluhelu.

var latlng 2 = google.maps.LatLng ( 37.3316591, -122.0301778 );
'ānō MyMarker 2 = google.maps.Marker ({
wahi: latlng 2 ,
palapala'āina: palapala'āina,
inoa: " Apple Computer "
});

Eia keʻano o kahi palapala 'āina Google ma kahi marker. E hoʻomaopopo, no ka hana o ka About.com CMS, ponoʻoe e kaomi i kahi loulou e kiʻi i ka palapala'āina eʻike. ʻAʻole kēia ka hihia ma kāuʻaoʻao.

05 o 05

E hoʻouka i kahi palapalaʻelua (aʻoi aku) paha i kāu palapala

Ināʻoe i nānā i koʻu hiʻohiʻona Google map palapala eʻikeʻoe eʻoi aku iaʻu ma mua o hoʻokahi palapala'āina i hōʻikeʻia ma kaʻaoʻao. He mea maʻalahi kēia. Eia keʻano.

1. E loaʻa i ka latitude a me ka longitude o nā palapala āpau āu e makemake ai e hōʻike e like me mākou i aʻoʻia ma ka Papa 2 o kēia tutorial.
2. E hoʻokomo i ka palapala'āina mua e like me mākou i aʻoʻia ma ka Papa 3 o kēia kumu aʻo. Inā makemakeʻoe i ka palapala'āina e loaʻa kahi marker, e hoʻohui i ka marker e like me kaʻaoʻao 4.
3. No ka palapalaʻalua, ponoʻoe e hoʻonui i 3 laina hou i kāu papahana hoʻomaka (script):
   var latlng2 = ke kahi google.maps.LatLng ( ʻelua mau kikowaena );
   kahe o kaʻuOptions2 = = zoom: 18, waena: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Inā makemakeʻoe i kahi kānana ma ka palapala 'āina hou, e hoʻouka i kahi kikowaena lua e kuhikuhi ana ma nā huiʻelua a me ka palapalaʻalua:
   var myMarker2 = google.maps.Marker ({position: latlng2 , palapala'āina: map2 , poʻo inoa: " Kāu Makai "));
5. A laila e hoʻohui i ka lua

   kahi makemakeʻoe i ka palapalaʻalua. A e hāʻawi pono i kahi id = "map_canvas_2" ID.

6. Ke kauʻia kāuʻaoʻao, e hōʻikeʻia nā palapala 'āinaʻelua

Eia ka leka o kaʻaoʻao me nā mahele Googleʻelua ma laila: