Paano Magdaragdag ng isang Google Map sa Iyong Web Page

01 ng 05

Kumuha ng isang Google Maps API Key para sa Iyong Site

Ang pinakamahusay na paraan upang magdagdag ng mapa ng Google sa iyong website ay ang paggamit ng Google Maps API. At inirerekumenda ng Google na makakuha ka ng isang API key upang magamit ang mga mapa.

Hindi ka kinakailangang makakuha ng isang API key upang magamit ang Google Maps API v3, ngunit ito ay lubhang kapaki-pakinabang dahil hinahayaan mong subaybayan ang iyong paggamit at magbayad para sa karagdagang access. Ang Google Maps API v3 ay may isang quota ng 1 kahilingan sa bawat segundo sa bawat gumagamit sa pinakamataas na 25,000 na mga kahilingan sa bawat araw. Kung ang iyong mga pahina ay lumampas sa mga limitasyon na kakailanganin mong paganahin ang pagsingil upang makakuha ng higit pa.

Paano makakuha ng Google Maps API Key

1. Mag-login sa Google gamit ang iyong Google account.
2. Pumunta sa Console ng Mga Nag-develop
3. Mag-scroll sa listahan at hanapin ang Google Maps API v3, pagkatapos ay i-click ang pindutang "OFF" upang i-on ito.
4. Basahin at sumang-ayon sa mga tuntunin.
5. Pumunta sa console ng API at piliin ang "API Access" mula sa kaliwang menu
6. Sa seksyong "Simple API Access", mag-click sa pindutan ng "Gumawa ng bagong pindutan ng Server ...".
7. Ipasok ang IP address ng iyong web server. Ito ang IP kung saan nagmumula ang iyong mga kahilingan sa Maps. Kung hindi mo alam ang iyong IP address, maaari mo itong tingnan.
8. Kopyahin ang teksto sa "API key:" na linya (hindi kabilang ang pamagat na iyon). Ito ang iyong API key para sa iyong mga mapa.

02 ng 05

I-convert ang Iyong Address sa Mga Coordinate

Upang magamit ang Google Maps sa iyong mga web page, kailangan mong magkaroon ng latitude at longitude para sa lokasyon. Maaari kang makakuha ng mga ito mula sa isang GPS o maaari mong gamitin ang isang online na tool tulad ng Geocoder.us upang sabihin sa iyo.

1. Pumunta sa Geocoder.us at i-type ang iyong address sa box para sa paghahanap.
2. Kopyahin ang unang numero para sa latitude (walang titik sa harap) at i-paste ito sa isang text file. Hindi mo kailangan ang antas (º) tagapagpahiwatig.
3. Kopyahin ang unang numero para sa longitude (muli nang walang sulat sa harap) at i-paste ito sa iyong text file.

Ang iyong latitude at longitude ay magiging ganito:

40.756076
-73.990838

Gumagana lamang ang Geocoder.us para sa mga address ng US, kung kailangan mo upang makuha ang mga coordinate sa ibang bansa, dapat kang maghanap ng katulad na tool sa iyong rehiyon.

03 ng 05

Pagdaragdag ng Mapa sa Iyong Web Page

Una, Idagdag ang Script ng Mapa sa

ng Iyong Dokumento

Buksan ang iyong web page at idagdag ang mga sumusunod sa HEAD ng iyong dokumento.

Baguhin ang naka-highlight na bahagi sa mga numero ng latitude at longitude na iyong isinulat sa hakbang dalawang.

Ikalawa, Idagdag ang Elemento ng Mapa sa Iyong Pahina

Sa sandaling mayroon ka ng lahat ng mga elemento ng script na idinagdag sa HEAD ng iyong dokumento, kailangan mong ilagay ang iyong mapa sa pahina. Gawin mo ito sa pamamagitan ng pagdaragdag ng isang elemento ng DIV na may katangiang id = "mapa-canvas". Inirerekumenda ko rin sa estilo mo ang div na ito na may lapad at taas na magkasya sa iyong pahina:

Panghuli, Mag-upload at Subukan

Ang huling bagay na dapat gawin ay i-upload ang iyong pahina at subukan na nagpapakita ang iyong mapa. Narito ang isang halimbawa ng isang Google mapa sa pahina. Tandaan, dahil sa ang paraan ng About.com CMS ay gumagana, kakailanganin mong i-click ang isang link upang makuha ang mapa upang lumitaw. Hindi ito magiging kaso sa iyong pahina.

Kung ang iyong mapa ay hindi nagpapakita, subukan ang pagsisimula nito sa isang BODY attribute:

onload = "initialize ()" >

Iba pang mga bagay upang suriin kung ang iyong mapa ay hindi naglo-load ay kinabibilangan ng:

• Maghanap ng mga typo sa iyong JavaScript, kabilang ang kaso. Ang JavaScript ay sensitibo sa kaso.
• Tiyaking mayroon kang naka-set na opsyon ng zoom at center.
• Siguraduhin na ang iyong elemento ng DIV ay nasa pahina na may tamang ID.
• Tiyakin na ang iyong elemento ng DIV ay may taas.

04 ng 05

Magdagdag ng Marker sa Iyong Mapa

Ngunit ano ang magandang mapa ng iyong lokasyon kung walang marker na nagsasabi sa mga tao kung saan sila dapat pumunta?

Upang magdagdag ng isang standard na red marker ng Google Maps idagdag ang mga sumusunod sa iyong script sa ibaba ng var mapa = ... linya:

var myLatlng = bagong google.maps.LatLng ( latitude, longitude );
var marker = bagong google.maps.Marker ({
posisyon: myLatlng,
mapa: mapa,
pamagat: " Dating Formaca About.com "
});

Baguhin ang naka-highlight na teksto sa iyong latitude at longitude at ang pamagat na nais mong lumitaw kapag ang mga tao ay nag-hover sa marker.

Maaari kang magdagdag ng maraming mga marker sa pahina hangga't gusto mo, idagdag lamang ang mga bagong variable na may bagong mga coordinate at mga pamagat, ngunit kung ang mapa ay masyadong maliit upang ipakita ang lahat ng mga marker, hindi nila ipapakita maliban kung ang reader ay mag-zoom out.

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

Narito ang isang halimbawa ng isang Google mapa na may marker. Tandaan, dahil sa ang paraan ng About.com CMS ay gumagana, kailangan mong mag-click ng isang link upang makuha ang mapa upang lumitaw. Hindi ito magiging kaso sa iyong pahina.

05 ng 05

Magdagdag ng Ikalawang (o Higit Pa) Mapa sa Iyong Pahina

Kung nakita mo ang aking halimbawa sa pahina ng Google maps mapapansin mo na mayroon akong higit sa isang mapa na ipinapakita sa pahina. Napakadali na gawin ito. Narito kung paano.

1. Kunin ang latitude at longitude ng lahat ng mga mapa na nais mong ipakita gaya ng natutunan namin sa hakbang 2 ng tutorial na ito.
2. Ipasok ang unang mapa bilang natutunan namin sa hakbang 3 ng tutorial na ito. Kung nais mo ang mapa upang magkaroon ng marker, idagdag ang marker tulad ng sa hakbang 4.
3. Para sa pangalawang mapa, kakailanganin mong magdagdag ng 3 bagong linya sa iyong initialize () script:
   var latlng2 = bagong google.maps.LatLng ( ikalawang coordinate );
   var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Kung gusto mo rin ng isang marker sa bagong mapa, magdagdag ng pangalawang marker na tumuturo sa pangalawang coordinate at ang pangalawang mapa:
   var myMarker2 = bagong google.maps.Marker ({posisyon: latlng2 , mapa: map2 , pamagat: " Pamagat ng iyong Marker "});
5. Pagkatapos ay idagdag ang pangalawa

   kung saan mo nais ang ikalawang mapa. At siguraduhing bigyan ito ng id = "map_canvas_2" ID.

6. Kapag naglo-load ang iyong pahina, ipapakita ang dalawang mga mapa

Narito ang code ng isang pahina na may dalawang Google maps dito: