Wéi Dir e Google Map op Är Websäit addieren

01 vum 05

Gitt e Google Maps API Schlëssel fir Är Site

De beschte Wee fir eng Google Kaart fir Är Websäit ze addéieren ass de Google Maps API ze benotzen. An Google recommandéiert datt Dir eng API-Taste kritt fir d'Kaarten ze benotzen.

Dir musst keen API-Schlëssel benotze fir de Google Maps API v3 ze benotzen, mä et ass ganz nëtzlech datt et Är Iwwerliewung iwwerwältegt an bezuele kënnt fir weider Zougang. Google Maps API v3 huet eng Quote vun 1 Ufro pro Sekunde pro User bis maximal 25.000 Ufroen pro Dag. Wann Är Säiten déi Grenzen iwwerschreidend Dir braucht fir de Rechnungen z'erméiglechen, fir méi ze kommen.

Wéi Dir e Google Maps API Key kritt

1. Logbuch op Google mat Ärem Google Kont.
2. Gitt an d'Developers Console
3. Scroll through the list and find the Google Maps API v3, a klickt dann op den "OFF" Knäppchen fir ze dréinen.
4. Liest a stëmmen d'Konditioune.
5. Gitt op d'API-Konsole an wielt "API Zougang" aus der Menüskaart
6. An der Rubrik "Einfachen API-Zougang" klickt op den "Neien Serverschlüssel eroflueden ...".
7. Gitt d'IP Adress vun Ärem Webserver. Dëst ass d'IP wou Är Kaart Ufroen wäert kommen. Wann Dir keng IP Adress kennt, kënnt Dir se opsinn.
8. Kopie vum Text op der "API-Taste:" Linn (net mat dësem Titel). Dëst ass Är API-Taste fir Är Kaarten.

02 vum 05

Konvertéieren Är Adress op Koordinaten

Fir Är Google Maps op Äre Websäite benotzen, musst Dir d'Breet an d'Längengkeet fir de Standort hunn. Dir kënnt dës vun engem GPS kréien oder Dir kënnt en Online-Tool wéi Geocoder.us fir Iech soen.

1. Gitt op Geocoder.us a gidd Är Adress an der Sichbox.
2. Kopéiert déi éischt Zuel fir de Breedegrad (ouni Bréif viru) a fanne se se an eng Textdatei. Dir braucht net d'Grad (º) Indikator.
3. Kopéiert déi éischt Nummer fir d'Längt (nees ouni Bréif viru) a fanne se an Är Textdatei.

Är Breet a Längengkeet wäert dann sou eppes kucken:

40.756076
-73.990838

Geocoder.us funktionéiert nëmme fir US Adressen, wann Dir d'Koordinate an engem anere Land kréien, musst Dir eng ähnlech Tool an Ärer Regioun.

03 vun 05

Sidd Dir d'Kaart op Är Websäit

Éischtens Setzt d'Kaart Skript op d'

vun Ärem Dokument

Öffnen Är Websäit a fügen Sie un den HEID aus Ärem Dokument hinzu.

Änneren den hellefen Deel op d'Breet a Längengummeren, déi Dir an der Schrëtt 2 schreift.

Zweetens, Füügt den Element vun der Kaart op Är Säit

Wann Dir all d'Skriptelementer den HEID aus Ärem Dokument addéiere wëllt, musst Dir Är Kaart op der Säit setzen. Dir kënnt dat maachen andeems Dir e DIV-Element mam id = "Kaart-Leinwand" -Attrib. Ech recommandéieren Iech och dës Div mat der Breet an der Héicht, déi op Är Säit passt:

Endlech, Upload an Test

Déi lescht Saach fir ze maachen ass Är Säit an ze testen déi Är Kaart weist. Hei ass e Beispill vun enger Google Kaart op der Säit. Remarque, well de About.com CMS fonktionnéiert, musst Dir op enger Säit klickt fir eng Kaart ze ersetzen. Dëst wäert net de Fall sinn op Ärer Säit.

Wann Är Kaart net opgëtt, probéiert et et mat engem BODY Attribut:

Onload = "initialiséieren ()" >

Aner Saachen fir ze kontrolléieren ob Är Kaart net opgelueden gëtt:

• Kuckt iech Fichier an Äre Javascript, inklusiv Fall. JavaScript ass kaempfindlech.
• Vergewëssert Iech datt Dir d'Zoom- a Centreoptiounen gesitt.
• Vergewëssert Iech Äert DIV-Element op der Säit mat der korrekt ID.
• Vergewëssert Iech datt Äre DIV-Element eng Héicht huet.

04 vun 05

Fügt e Marker op Är Kaart

Mä wat gutt ass eng Kaart vun Ärem Standuert, wann et kee Marker seet, Leit ze soen wou se sollen goen?

Fir e standard Google Maps roude Mark ze addieren add the following to your script below the var map = ... line:

var myLatlng = nei Google.maps.LatLng ( Breedegrad, Längt );
var marker = new google.maps.Marker ({
Positioun: myLatlng,
Kaart: Kaart,
Titel: " Fréier Iwwerwaach Headquarters "
});

Ändert den markéierter Text op Äre Breedegraden an d'Längt an den Titel deen Dir gitt erscheinen wann d'Leit iwwer de Marker schwetzen.

Dir kënnt esou vill Markéierer op d'Säit eropgoen wéi Dir wëllt, just nei Variablen mat neien Koordinaten an Titelen addéieren, awer wann d'Kaart ze kleng ass fir all d'Marker ze weisen, ginn se net opgedeelt, ausser de Lieser zoomt aus.

var latlng 2 = nei google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = neier google.maps.Marker ({
Positioun: latlng 2 ,
Kaart: Kaart,
Titel: " Apple Computer "
});

Hei ass e Beispill vun enger Google Kaart mat engem Marker. Remarque, well d'About.com CMS funktionnéiert, musst Dir op enger Säit klickt op déi Kaart ze ersetzen. Dëst wäert net de Fall sinn op Ärer Säit.

05 05

Fuert een zweeten (oder méi) Kaart op Är Säit

Wann Dir op méngem Beispill Google Maps Kaart Säit gekuckt hutt, fannt Dir datt ech méi wéi eng Kaart op der Säit hunn. Dëst ass ganz einfach ze maachen. Hei ass wéi.

1. Gitt d'Breetens- a Längt vun all de Kaarten déi Dir sicht, wéi mer am Laaf vun 2 vun dësem Tutorial geléiert hutt.
2. Setzt déi éischt Kaart, wéi mer an der Schrëtt 3 vun dësem Tutorial geléiert hunn. Wann Dir wëllt datt d'Kaart e Marker hunn, fügen d'Marker wéi an 4.
3. Fir déi zweet Kaart musst Dir 3 nei Linnen eropgoen fir Ären Initialiséierungs () Skript:
   var latlng2 = nei google.maps.LatLng ( zweet Koordinaten );
   var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Wann Dir e Marker op der neier Kaart wëllt, add een zweet Marker op déi zweet Koordinaten an déi zweet Kaart:
   var myMarker2 = nei google.maps.Marker ({position: latlng2 , kaart : map2 , Titel: " Ären Marker Titel "});
5. Fuert déi zweet

   wou Dir déi zweet Kaart wëllt. A seet sécher, datt et eng id = "map_canvas_2" ID gëtt.

6. Wann Är Säit luede wäerte zwou Kaarten ugewisen

Hei ass de Code vun enger Säit mat zwou Google Kaarten op: