Hoe kin in Google kaart taheakje oan jo webstee

01 of 05

Krij in Google Maps API-kaai foar jo side

De bêste manier om in Google map oan jo webside te foegjen is om Google Maps API te brûken. En Google advisearret dat jo in API-kaai krije om de kaarten te brûken.

Jo binne net nedich om in API-kaai te krijen om Google Maps API v3 te brûken, mar it is tige brûkber as it jo jo brûke kinne kontrolearje en betelje foar ekstra tagong. Google Maps API v3 hat in kwota fan 1 fersyk per sekunde per brûker oant in maksimum fan 25.000 fersiken per dei. As jo ​​siden oer dizze limiten ferlytsje dan moatte jo de fakturearring ynskeakelje om mear te krijen.

Hoe kin in Google Maps API-kaai krije

1. Oanmelde by Google mei jo Google akkount.
2. Gean nei de ûntwikkelders konsole
3. Rôlje troch de list en sykje de Google Maps API v3, klik dan op de "OFF" knop om dizze te wikseljen.
4. Lês en akseptearje de termen.
5. Gean nei de APIs-konsole en selektearje "API-tagong" út it linkmenu
6. Yn 'e siel "API-ienfâldige API-aksjes" klikke jo op de knop "Nije tsjinner opmeitsje ...".
7. Fier it IP adres fan jo webserver yn. Dit is de IP wêr't jo Maps Requests komme út. As jo ​​jo IP-adres net kenne, kinne jo it opsykje.
8. Kopiearje de tekst op de "API-kaai:" line (sûnder dat titel). Dit is jo API-kaai foar jo kaarten.

02 of 05

Ferwiderje jo adres oan Coordinaten

Om Google Maps op jo websiden te brûken, moatte jo de latte en lingte hawwe foar de lokaasje. Jo kinne dit krije fan in GPS, of jo kinne in online ark brûke lykas Geocoder.us om jo te fertellen.

1. Gean nei Geocoder.us en typ yn jo adres yn it sykfak.
2. Kopiearje it earste nûmer foar de breedte (sûnder in letter foar letter) en paste it yn in tekstbestân. Jo moatte de grad (º) -indikator net nedich hawwe.
3. Kopiearje it earste nûmer foar de lingte (wer sûnder in letter yn 'e foarkant) en yn jo tekst bestân.

Jo latitudes en lingtegraad sjogge dit sa:

40.756076
-73.990838

Geocoder.us wurket allinich foar US-adressen, as jo de koördinaat yn in oar lân krije moatte, moatte jo sykje op in likense tool yn jo regio.

03 of 05

It kaart tafoegje oan jo webside

Eerst it Mapskript tafoegje oan de

fan jo dokumint

Iepenje jo webside en add this to the HEAD of your document.

Feroarje de markearre diel nei de breedte- en lingtegraadnûmers dy't jo yn tredde twa skreaun hawwe.

Tweintich Foegje it Mapelemel oan jo side ta

As jo ​​al de skripteleminten tafoegje oan de HEAD fan jo dokumint, moatte jo jo kaart op 'e side opstelle. Jo dogge dit troch in DIV-elemint te tafoegje mei it id = "map-canvas" attribute. Ik advisje jo ek dizze div oan te meitsjen mei de breedte en hichte dy't jo op jo side passe:

As lêste, uploadje en testen

It lêste ding om te meitsjen is jo side te uploaden en te testen dat jo kaart sjen lit. Hjir is in foarbyld fan in Google map op 'e side. Taljochting, fanwegen de wize wêrop it About.com CMS wurket, moatte jo in keppeling klikke om de kaart te foarkommen. Dit sil it gefal net wêze op jo side.

As jo ​​kaart net sjen lit, probearje it ynitialisearjen mei in BODY-attribút:

onload = "initialize ()" >

Oare dingen om te kontrolearjen oft jo kaart net laden lûkt:

• Sjoch foar faaks yn jo JavaSkript, ynklusyf case. JavaScript is saak sensitive.
• Soargje derfoar dat jo de sesje- en sintrumsopsjes ynsteld hawwe.
• Soargje derfoar dat jo DIV-elemint op 'e side is mei de goede ID.
• Soargje derfoar dat jo DIV-elemint in hichte hat.

04 of 05

In Marker taheakje oan jo kaart

Mar wat is in kaart fan jo lokaasje as der gjin marker is te fertellen minsken wêr't se hinne moatte?

Om in standert Google Maps-rôchmarker taheakje, add the following to your script below the var map = ... line:

var myLatlng = nije google.maps.LatLng ( latitude, longitude );
var marker = nije google.maps.Marker ({
position: myLatlng,
kaart: kaart,
Titel: " Former About.com Headquarters "
});

Feroarje de markearre tekst nei jo breedte en lingte en de titel dy't jo graach sjen wolle as minsken oer de marker draaie.

Jo kinne as safolle markers tafoegje oan 'e side as jo wolle, foegje nije fariabelen mei nije koördinaten en titels oan, mar as de kaart te lyts is om alle markers wer te jaan, sille se net sjen litte as' t de lêzer útkomt.

var latlng 2 = nije google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = nije google.maps.Marker ({
position: latlng 2 ,
kaart: kaart,
title: " Apple Computer "
});

Hjir is in foarbyld fan in Google map mei in marker. Tink derom, om't de How.com CMS wurket, moatte jo in keppeling klikke om de kaart te sjen. Dit sil it gefal net wêze op jo side.

05 of 05

Foegje in twadde (of mear) kaart nei jo side

As jo ​​op myn foarbyld fan 'e Google kaartsjes besjen, sjochsto dat ik mear as ien map werjûn op' e side. Dit is hiel maklik te dwaan. Hjir is hoe.

1. Krij de latte en lingte fan alle kaarten dy't jo sjen wolle as wy leard hawwe yn stap 2 fan dit lesboek.
2. Foegje de earste kaart as wy leard hawwe yn stap 3 fan dit lesboek. As jo ​​wolle dat de kaart in marker hat, foegje de marker as yn stap 4.
3. Foar de twadde map moatte jo 3 nije linen tafoegje oan jo initialisearje () skript:
   var latlng2 = nije google.maps.LatLng ( twadde koördinaten );
   var myOptions2 = {zoom: 18, sintrum: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = nije google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. As jo ​​in marker op 'e nije kaart ek wolle wolle, taheakje in twadde marker oan' e twadde koördinearjen en de twadde kaart:
   var myMarker2 = nije google.maps.Marker ({position: latlng2 , kaart: map2 , title: " Your Marker Title "});
5. Dan add the second

   wêr't jo de twadde kaart wolle. En moatte der wis fan wêze dat er in ID = "map_canvas_2" ID jout.

6. As jo ​​side lade, sille twa kaarten sjen

Hjir is de koade fan in side mei twa Google kaarten: