Nola gehitu Google Map zure webgunera

05eko 1ean

Lortu Google Maps APIa zure webgunerako giltza

Google mapan zure webgunea gehitzeko modurik onena Google Maps APIa erabiltzea da. Google-k gomendatzen dizu API gakoa eskuratu ahal izateko mapak erabiltzeko.

Ez duzu Google Maps API v3 erabiltzeko API gakoa eskuratu behar, baina oso erabilgarria da zure erabilera kontrolatzeko eta sarbide osagarriak ordaintzeko. Google Maps API v3 erabiltzaile bakoitzeko 1 eskaera bakoitzeko kuota du egun bakoitzeko 25.000 eskaera gehienez. Zure orriak mugak gainditzen badituzu, fakturazioa gaitu beharko duzu gehiago lortzeko.

Nola lortu Google Maps API gakoa

1. Hasi saioa Google-n zure Google kontua erabiliz.
2. Joan Garatzaileen kontsolara
3. Joan zerrendara eta bilatu Google Maps API v3, eta egin klik "OFF" botoian aktibatzeko.
4. Irakurri eta onartu terminoak.
5. Joan API kontsolara eta hautatu "API sarbidea" ezkerreko menuan
6. "API sinpleen sarbidea" atalean, egin klik "Sortu zerbitzari berriaren tekla ..." botoian.
7. Idatzi zure web zerbitzuaren IP helbidea. Honen IP helbidea da zure Maps eskaerak datozela. Zure IP helbidea ezagutzen ez baduzu, begiratu dezakezu.
8. Kopiatu testua "API tekla:" lerroan (titulu hori ez barne). Hau zure API gakoa zure mapetarako da.

02 de 05

Bihurtu zure helbidea koordenatuetara

Google Maps zure web orrietan erabiltzeko, kokapenaren latitudea eta luzera izan behar dituzu. Horiek GPS bidez lor ditzakezu edo Geocoder.us bezalako tresna elektroniko bat erabil dezakezu esateko.

1. Joan Geocoder.us helbidera eta idatzi zure helbidea bilaketa-koadroan.
2. Kopiatu latitudearen lehenengo zenbakia (aurrealdean letra gabe) eta itsatsi testu fitxategi batean. Ez duzu maila (º) adierazlea behar.
3. Kopiatu lehen zenbakia longitudean (berriro aurrean letra gabe) eta itsatsi ezazu zure testu-fitxategian.

Zure latitude eta longitudek honelako itxura izango dute:

40.756076
-73,990838

Geocoder.us helbideak EEBBetan bakarrik funtzionatzen du, beste herrialde batean koordenatuak lortu behar badituzu, zure eskualdean antzeko tresna bat bilatu beharko zenuke.

05/03

Mapa zure webgunera gehitzea

Lehenik eta behin, gehitu Map Scriptra

Zure dokumentua

Ireki zure web orria eta gehitu hau zure dokumentuaren HEAD.

Aldatu nabarmendutako zatia bi urratsean idatzi dituzun latitude eta longitudearen zenbakietara.

Bigarrenik, gehitu zure elementuaren Maparen elementua

Zure dokumentuaren HEADrean gehitutako script-elementu guztiak dituzunean, orriaren mapan kokatu behar duzu. Hau egiten baduzu DIV elementua id = "maparen ikonoa" atributua gehituz. Estilo hau ere gomendatzen dizut zure orriarekin doitzeko zabalera eta altuera duen estilo hau:

Azkenean, kargatu eta probatu

Egin beharreko azken gauza zure orria kargatu eta zure mapa erakusten duen probatu. Hemen orrialdeko Google maparen adibide bat da. Oharra, CSS-k burutzen duen moduaren arabera, esteka bat sakatu beharko duzu mapa agertzeko. Hau ez da zure orrian agertuko.

Zure mapa ez bada agertzen, saiatu hasieratu BODY atributuarekin:

onload = "hasieratu ()" >

Mapak kargatzen ari ez diren beste gauza batzuen artean, besteak beste:

• Bilatu akatsak zure JavaScriptan, kasu hori barne. JavaScript kasu sentikorra da.
• Ziurtatu zooma eta zentro aukera ezarri duzula.
• Ziurtatu DIV elementua orrialdean dago ID zuzena duzula.
• Ziurtatu zure DIV elementuak altuera duela.

04 de 05

Gehitu markatzailea zure mapan

Baina zer ona zure kokapenaren mapa da?

Google Maps-en gorri markatzaile estandarra gehitzeko, gehitu ondoko maparen azpian zure script-a: var map = ... lerroa:

var myLatlng = new google.maps.LatLng ( latitude, longitude );
var marker = berria google.maps.Marker ({
posizioa: myLatlng,
mapa: mapa,
Izenburua: " Ohiko egoitza nagusia "
});

Aldatu nabarmendutako testua zure latitudeeraino eta luzeraino eta markatzailean zehar mugitzen direnean agertzen den izenburua.

Markatzaile ugari gehitu ditzakezu nahi duzun orrialdera, gehitu aldagai berriak koordenatu eta izenburu berriekin, baina mapa txikia bada markatzaile guztiak bistaratzeko, ez dute erakutsiko irakurleak zooma ateratzen ez badu.

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

Hemen Google mapa bat markatzaile batekin adibide bat da. Kontuan izan, modu horretan, About.com CMS-k funtzionatzen duelako, esteka bat sakatu behar duzu mapa agertzeko. Hau ez da zure orrian agertuko.

05 de 05

Gehitu bigarren (edo gehiago) mapa zure orrialdera

Nire adibidean begiratu baduzu Google-ren mapen orrian, orrialdean bistaratuko den mapa baino gehiago daukat. Hau oso erraza da. Hona nola.

1. Eskuratu tutoretza honen 2. urratsean ikasi dugun bezala, mapak eta latitudeen luzera.
2. Sartu lehenengo mapa tutorial honen 3. urratsean ikasi dugun bezala. Mapak markatzailea izatea nahi baduzu, gehitu markatzailea 4. urratsean.
3. Bigarren mapa lortzeko, 3 lerro berri gehitu behar dituzu zure hasieratzean () script-ean:
   var latlng2 = new google.maps.LatLng ( bigarren koordenatuak );
   var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Marra berri bat nahi baduzu mapan ere, gehitu bigarren markatzailea bigarren koordenatuetan eta bigarren planoan seinalatuz:
   var myMarker2 = new google.maps.Marker ({position: latlng2 , map: map2 , title: " Zure markatzailea titulua "}};
5. Ondoren, gehitu bigarrena

   non bigarren mapa nahi duzu. Eta ziurtatu ID = "map_canvas_2" IDa emateko.

6. Orria kargatzen denean, bi mapa agertuko dira

Hona hemen orrialdeko bi mapa Google mapekin: