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
- Mag-login sa Google gamit ang iyong Google account.
- Pumunta sa Console ng Mga Nag-develop
- Mag-scroll sa listahan at hanapin ang Google Maps API v3, pagkatapos ay i-click ang pindutang "OFF" upang i-on ito.
- Basahin at sumang-ayon sa mga tuntunin.
- Pumunta sa console ng API at piliin ang "API Access" mula sa kaliwang menu
- Sa seksyong "Simple API Access", mag-click sa pindutan ng "Gumawa ng bagong pindutan ng Server …".
- 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.
- Kopyahin ang teksto sa "API key:" na linya (hindi kabilang ang pamagat na iyon). Ito ang iyong API key para sa iyong mga mapa.
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.
- Pumunta sa Geocoder.us at i-type ang iyong address sa box para sa paghahanap.
- 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.
- 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 U.S., kung kailangan mo upang makuha ang mga coordinate sa ibang bansa, dapat kang maghanap ng katulad na tool sa iyong rehiyon.
03 ng 05Pagdaragdag 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. Ginagawa mo ito sa pamamagitan ng pagdaragdag ng isang DIV sangkap na may id = "map-canvas" katangian. 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 katangian:
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.
- Tiyakin na mayroon ka ng
mag-zoomatgitnaitinakda ang mga pagpipilian. - Tiyakin na ang iyong
DIVAng elemento ay nasa pahina na may tamang ID. - Tiyakin na ang iyong
DIVAng elemento ay may taas.
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 sumusunod sa iyong script sa ibaba ng var mapa = … linya:
var myLatlng = new google.maps.LatLng ( latitude, longitude );var marker = bagong google.maps.Marker ({posisyon: myLatlng,mapa: mapa,pamagat: " Former About.com Headquarters '});
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 05Magdagdag 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.
- 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.
- 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.
- 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); - 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: mapa2 , pamagat: " Pamagat ng iyong Marker ' }); - Pagkatapos ay idagdag ang secondwhere na gusto mo ang pangalawang mapa. At siguraduhin na ibigay ito
id = "map_canvas_2"ID. - Kapag naglo-load ang iyong pahina, ipapakita ang dalawang mga mapa
Narito ang code ng isang pahina na may dalawang Google maps dito:
