Unsaon Pagdugang og Google Map sa Imong Web Page

01 sa 05

Pagkuha og Key Google Maps API alang sa Imong Site

Ang pinakamaayong paagi sa pagdugang sa mapa sa Google sa imong website mao ang paggamit sa Google Maps API. Ug ang Google nagsugyot nga makakuha ka sa usa ka API key aron gamiton ang mga mapa.

Wala ka kinahanglana nga makakuha og API nga yawe sa paggamit sa Google Maps API v3, apan kini mapuslanon kaayo kay kini magahatag kanimo sa pag-monitor sa imong paggamit ug pagbayad alang sa dugang nga pag-access. Ang Google Maps API v3 adunay usa ka quota nga 1 ka hangyo kada ikaduha matag gumagamit ngadto sa maximum nga 25,000 nga hangyo matag adlaw. Kon ang imong mga panid molapas sa mga limitasyon nga imong gikinahanglan aron mahimo ang pagsingil aron makakuha og dugang.

Kon unsaon pagkuha ang usa ka Google Maps API Key

1. Pag-login sa Google gamit ang imong Google account.
2. Lakaw sa Console sa Developers
3. Pag-scroll sa listahan ug pangitaa ang Google Maps API v3, unya i-klik ang "OFF" button aron sa pagpabalik niini.
4. Basaha ug uyon sa mga termino.
5. Lakaw ngadto sa console sa API ug pilia ang "API Access" gikan sa left-hand menu
6. Sa "Simple API Access" nga seksyon, i-klik ang "Create new Server key ..." button.
7. Pagsulod sa IP address sa imong web server. Kini ang IP diin maggikan ang imong Maps request. Kung wala ka mahibalo sa imong IP address, mahimo nimo kini tan-awon.
8. Kopyahi ang teksto sa "API key:" linya (wala naglakip sa maong titulo). Kini ang imong yawe sa API alang sa imong mga mapa.

02 sa 05

I-convert ang imong Address sa Coordinate

Aron magamit ang Google Maps sa imong mga web pages, kinahanglan nimo nga adunay latitude ug longitude alang sa nahimutangan. Mahimo nimo kining makuha gikan sa GPS o mahimo nimo gamiton ang usa ka online nga himan sama sa Geocoder.us aron sultihan ka.

1. Adto sa Geocoder.us ug i-type ang imong address sa search box.
2. Kopyaha ang unang numero sa latitude (walay sulat sa atubangan) ug i-paste kini sa usa ka text file. Wala ka magkinahanglan sa degree (º) indicator.
3. Kopyaha ang unang numero alang sa longitude (pag-usab nga walay sulat sa atubangan) ug i-paste kini sa imong text file.

Ang imong latitude ug longitude makita nga ingon niini:

40.756076
-73.990838

Ang Geocoder.us magamit lamang alang sa mga adres sa US, kung kinahanglan nimo nga makuha ang mga koordinetor sa laing nasud, kinahanglan ka mangita sa susamang himan sa imong rehiyon.

03 sa 05

Pagdugang sa Mapa ngadto sa Imong Web Page

Una, Idugang ang Script sa Mapa ngadto sa

sa Imong Dokumento

Ablihi ang imong web page ug idugang ang mosunod sa HEAD sa imong dokumento.

Bag-oa ang gipahinungdan nga bahin sa latitude ug longitud nga mga numero nga imong gisulat sa ikaduha.

Ikaduha, Idugang ang Elemento sa Mapa sa Imong Pahina

Sa higayon nga imong maangkon ang tanang mga elemento sa script nga idugang sa HEAD sa imong dokumento, imong gikinahanglan ang posisyon sa imong mapa sa panid. Gihimo nimo kini pinaagi sa pagdugang sa usa ka elemento sa DIV nga adunay id = "mapa-canvas" nga kinaiya. Girekomenda ko usab nga estilo kini nga div sa gilapdon ug gitas-on nga mosibo sa imong panid:

Sa katapusan, Pag-upload ug Pagsulay

Ang katapusan nga butang nga buhaton mao ang pag-upload sa imong panid ug pagsulay nga gipakita ang imong mapa. Ania ang usa ka pananglitan sa Google nga mapa sa panid. Hinumdumi, tungod sa mga buhat sa About.com CMS, kinahanglan nimo i-klik ang usa ka link aron mapakita ang mapa. Dili kini mao ang mahitabo sa imong panid.

Kon ang imong mapa dili makita, sulayi ang pagsugod niini sa BODY attribute:

onload = "initialize ()" >

Ang ubang mga butang aron masusi kon ang imong mapa wala naglakip sa:

• Pangitag mga typos sa imong JavaScript, lakip ang kaso. JavaScript mao ang case sensitive.
• Siguradoha nga anaa kanimo ang mga opsyon sa zoom ug center.
• Siguroha nga ang imong elemento sa DIV anaa sa panid nga adunay husto nga ID.
• Siguroha nga ang imong elemento sa DIV adunay gitas-on.

04 sa 05

Idugang ang usa ka Marker sa Imong Mapa

Apan unsa ka maayo ang usa ka mapa sa imong nahimutangan kung wala'y marker nga nagsulti sa mga tawo kung asa sila kinahanglan moadto?

Aron makadugang usa ka standard nga red marker sa Google Maps idugang ang mosunod sa imong script sa ubos sa var map = ... linya:

var myLatlng = new google.maps.LatLng ( latitude, longitude );
var marker = new google.maps.Marker ({
posisyon: myLatlng,
mapa: mapa,
titulo: " Kanhi About.com Headquarters "
});

Bag-oa ang gipahinungdan nga teksto sa imong latitude ug longitude ug ang titulo nga gusto nimo ipakita kung ang mga tawo nag-hover sa marka.

Mahimo nimong idugang ang daghang mga marka sa panid ingon sa imong gusto, pagdugang lamang sa mga bag-ong mga butang nga may mga bag-ong mga coordinate ug mga titulo, apan kung ang mapa gamay kaayo aron ipakita ang tanan nga mga marka, dili kini ipakita gawas kon ang magbabasa mag-zoom.

var latlng 2 = new google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = bag-ong google.maps.Marker ({
posisyon: latlng 2 ,
mapa: mapa,
ulohan: " Apple Computer "
});

Ania ang usa ka pananglitan sa usa ka mapa sa Google nga adunay marka. Hinumdumi, tungod sa mga buhat sa About.com CMS, kinahanglan nimo i-klik ang usa ka link aron mapakita ang mapa. Dili kini mao ang mahitabo sa imong panid.

05 sa 05

Idugang ang Ikaduha (o Dugang) Mapa sa Imong Pahina

Kon imong gitan-aw ang akong panig-ingnan sa Google maps page imong mahibal-an nga adunay labaw pa sa usa ka mapa nga gipakita sa panid. Kini sayon ​​kaayo nga buhaton. Ania kung giunsa.

1. Kuhaa ang latitude ug longitude sa tanan nga mga mapa nga gusto nimo ipakita sama sa among nakat-unan sa lakang 2 niini nga panudlo.
2. Pagsulod sa unang mapa ingon sa atong nakat-unan sa lakang 3 niini nga panudlo. Kung gusto nimo ang mapa nga adunay marker, dugangi ang marka ingon sa lakang 4.
3. Alang sa ikaduhang mapa, kinahanglan nimo nga idugang ang 3 ka bag-ong linya sa imong sinulat () nga script:
   var latlng2 = new google.maps.LatLng ( ikaduhang koordinat );
   var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Kon gusto nimo usab ang usa ka marker sa bag-ong mapa, pagdugang sa ikaduhang marka nga nagtudlo sa ikaduha nga koordinasyon ug sa ikaduha nga mapa:
   var myMarker2 = new google.maps.Marker ({posisyon: latlng2 , map: map2 , title: " Your Marker Title "});
5. Dayon dugangi ang ikaduha

   asa nimo gusto ang ikaduhang mapa. Ug siguroha nga ihatag kini usa ka id = "map_canvas_2" ID.

6. Kon magamit ang imong pahina, duha ka mapa ang ipakita

Ania ang kodigo sa usa ka panid nga adunay duha ka Google nga mga mapa niini: