Esi tinye Google Map na ibe weebụ

01 nke 05

Chọta Ntuziaka API Google Maps maka n'Ịntanet gị

Ụzọ kachasị mma iji tinye map Google na ebe nrụọrụ weebụ gị bụ iji Google Maps API. Google na-atụ aro ka ị nweta igodo API iji jiri map.

Achọghị ka ị nweta igodo API iji Google Maps API v3, mana ọ bara uru dịka ọ na-ahapụ gị nyochaa njirimara gị ma kwụọ ụgwọ maka ohere ndị ọzọ. Google Maps API v3 nwere ikikere nke 1 arịrịọ kwa ụbọchị site na onye ọrụ ruo ugboro 25,000 kwa ụbọchị. Ọ bụrụ na ibe gị gafere ókè ndị ị ga-achọ iji mee ka ịgba ụgwọ iji nwetakwuo.

Otu esi enweta Google API Key

1. Nbanye Google na iji akaụntụ Google gị.
2. Gaa na njikwa ndị mmepe
3. Pịgharịa n'ime ndepụta ma chọta Google Maps API v3, wee pịa bọtịnụ "Kwụsị" iji gbanye ya.
4. Gụọ ma kwenye na usoro ahụ.
5. Gaa na njikwa API ma họrọ "API Access" site na aka ekpe
6. Na "Mfe ngwa API Access", pịa "Mepụta igodo ohuru ohuru ...".
7. Tinye adreesị IP nke sava weebụ gị. Nke a bụ IP ebe ntinye map gị ga-abịa. Ọ bụrụ na ị maghị adreesị IP gị, ịnwere ike ile ya anya.
8. Detuo ederede na "API igodo:" akara (abanyeghi aha ahu). Nke a bụ isi ihe API maka map gị.

02 nke 05

Weghachite Adreesị Gị na Kọkorita

Iji jiri Google Maps na ibe weebụ gị, ịkwesịrị ịnweta ohere na ogologo oge maka ọnọdụ ahụ. Ị nwere ike inweta ihe ndị a site na GPS ma ọ bụ ịnwere ike iji ngwá ọrụ dị ka Geocoder.us gwa gị.

1. Gaa na Geocoder.us ma tinye na adreesị gị na igbe nchọta.
2. Detuo ọnụọgụ mbụ maka ohere (na-enweghị akwụkwọ ozi n'ihu) ma kpaa ya n'ime faịlụ ederede. Ikwesighi ichota akara (º).
3. Detuo nọmba mbụ maka ogologo oge (ọzọ na-enweghị akwụkwọ ozi n'ihu) ma kpaa ya n'ime faịlụ gị.

Ogologo oge na ogologoitude gị ga - ele ihe anya dị ka nke a:

40.756076
-73.990838

Geocoder.us na-arụ ọrụ maka adreesị US, ọ bụrụ na ịchọrọ ịchọta nhazi na mba ọzọ, ị ga-achọ ọrụ yiri nke ahụ na mpaghara gị.

03 nke 05

Na-agbakwụnye Map na Weebụ Weebụ

Mbụ, Tinye Ederede Map na

nke akwụkwọ gị

Mepee ibe weebụ gi ma gbakwunye ihe na-esote ONYE nke akwukwo gi.

Gbanwee akụkụ ahụ a pụta ìhè na mpaghara ugwu na ogologoitude nke ị dere na nzọụkwụ abụọ.

Nke abụọ, Tinye Element Map na Page gị

Ozugbo i nwere ihe edemede niile e tinyere na HEAD nke akwụkwọ gị, ịkwesịrị ịtọ map gị na ibe ahụ. Ị na-eme nke a site na ịgbakwụnye ihe DIV na id = "àgwà map". M na-akwado gị ka ị na-ekekwa ihe ịgba a na obosara na ịdị elu nke ga-adabara na ibe gị:

N'ikpeazụ, Bulite na Ule

Ihe ikpeazụ ịme bụ bulite ibe gị ma nyochaa ihe ngosi ntanetị gị. Nke a bụ ihe atụ nke map Google na ibe. Rịba ama, n'ihi ụzọ nke About.com CMS na-arụ ọrụ, ị ga-ahụ njikọ iji mee ka map ahụ pụta. Nke a agaghị abụ ikpe na ibe gị.

Ọ bụrụ na eserese gị apụtaghị, gbalịa ịmalite ya na ụdị àgwà BODY:

onload = "mbido ()" >

Ihe ndị ọzọ iji lelee ma ọ bụrụ na eserese gị adịghị ebuba gụnyere:

• Chọpụta maka usoro iwu gị na Javascript gị, gụnyere ikpe. JavaScript bụ ikpe ziri ezi.
• Jide n'aka na ị nwere mbugharị na nhọrọ etiti.
• Jide n'aka na akụkụ DIV gị nọ na peeji ahụ na ID ziri ezi.
• Jide n'aka na akụkụ nke DIV dị elu.

04 nke 05

Tinye Marker na Map gị

Ma, olee ezigbo map nke ọnọdụ gị ma ọ bụrụ na ọ dịghị onye na-agwa ndị mmadụ ebe ha kwesịrị ịga?

Iji tinye ọkọlọtọ na-acha uhie uhie Google Maps gbakwunye ihe na-esonụ na edemede gị dị n'okpuru nhazi map = ... akara:

var myLatlng = ọhụrụ google.maps.LatLng ( latitude, longitude );
var marker = ọhụrụ google.maps.Marker ({
ọnọdụ: myLatlng,
map: map,
aha: " Isi ụlọ ọrụ banyere About.com "
});

Gbanwee ederede a pụta ìhè na mpaghara gị na ogologo oge na aha ị ga-achọ ịpụta mgbe ndị mmadụ na-atụgharị akara.

Ịnwere ike ịgbakwunye ọtụtụ ihe nrịbama na ibe dị ka ịchọrọ, tinye naanị ngbanwe ọhụrụ na nchịkọta ọhụrụ na utu aha, ma ọ bụrụ na map dị obere iji gosipụta akara niile, ha agaghị egosi ma ọ gwụla ma onye na-agụ ya ga-apụ.

var latlng 2 = ọhụrụ google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = ọhụrụ google.maps.Marker ({
ọnọdụ: latlng 2 ,
map: map,
aha: " Apple Computer "
});

Nke a bụ ihe atụ nke map Google na akara. Rịba ama, n'ihi ụzọ nke About.com CMS na-arụ ọrụ, ị ga-pịa njikọ iji mee ka map ahụ pụta. Nke a agaghị abụ ikpe na ibe gị.

05 05

Tinye nke abụọ (ma ọ bụ More) Map gị

Ọ bụrụ na ị lere anya na eserese ngosi nke Google m, ị ga-achọpụta na enwere m ihe karịrị otu map gosipụtara na ibe. Nke a dị mfe ime. Lee otú.

1. Get latitude na longitude nke niile map ịchọrọ igosipụta dị ka anyị mụtara na nzọụkwụ 2 nke nkuzi a.
2. Tinye map mbụ ka anyị mụtara na nzo nke 3 nke nkuzi a. Ọ bụrụ na ịchọrọ ka eserese ahụ nwere akara, tinye akara ahụ dị ka nzọụkwụ 4.
3. Maka map nke abụọ, ị ga-achọ ịtinye ọhụụ ọhụrụ na nke mbụ gị () edemede:
   var latlng2 = ọhụrụ google.maps.LatLng ( nlekọta nke abụọ );
   var myOptions2 = {mbugharị: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = ọhụrụ google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Ọ bụrụ na ịchọrọ akara na map ọhụrụ ahụ, gbakwunye akara nke abụọ na nhazi nke abụọ na map nke abụọ:
   var myMarker2 = ọhụrụ google.maps.Marker ({ọnọdụ: latlng2 , map: map2 , aha: " Ihe Nkọwa Gị "});
5. Wee tinye nke abụọ

   ebe ịchọrọ map nke abụọ. Ma jide n'aka inye ya id = "map_canvas_2" ID.

6. Mgbe akwụkwọ gị dị elu, map abụọ ga-egosipụta

Nke a bụ koodu nke ibe na map abụọ Google na ya: