Hogyan adhat hozzá Google Térképet egy API-kulcshoz tartozó weboldalhoz?

01/05

Kapjon Google Maps API-kulcsot az Ön webhelyére

A Google Térkép API hozzáadásához a legjobb módja a Google térkép hozzáadásához. A Google azt javasolja, hogy kapjon API-kulcsot a térképek használatához.

Nem kell API-kulcsot kapnia a Google Térkép API v3 használatához, de nagyon hasznos, mivel lehetővé teszi a használat felügyeletét és a további hozzáférés fizetését. A Google Térkép API v3 kvótája 1 kérelem másodpercenként, legfeljebb 25 000 kérelem naponta. Ha az oldalad meghaladja ezeket a határértékeket, akkor többletbevételhez engedélyeznie kell a számlázást.

Hogyan szerezhető be egy Google Térkép API-kulcs

1. Jelentkezzen be a Google-fiókba Google-fiókja segítségével.
2. Lépjen a Fejlesztői konzolra
3. Keresse végig a listát, és keresse meg a Google Térkép API v3-at, majd kapcsolja be az "OFF" gombot.
4. Olvassa el és fogadja el a feltételeket.
5. Menjen az API-konzolra, és válassza a bal oldali menü "API Access" menüpontját
6. Az "Egyszerű API hozzáférés" szakaszban kattintson az "Új kiszolgáló kulcs … létrehozása" gombra.
7. Adja meg a webszerver IP-címét. Ez az IP, ahol a Google Térkép kérései származnak. Ha nem ismeri az IP-címét, felkeresheti.
8. Másolja a szöveget az "API kulcs:" sorra (a cím kivételével). Ez az Ön API-kulcs a térképekhez.

02. 05. sz

Konvertálja címét a koordinátákra

Annak érdekében, hogy a Google Térképet weboldalain használhassa, meg kell adnia a hely szélességét és hosszúságát. Ezeket a GPS-től kaphatja meg, vagy használhat egy online eszközt, mint a Geocoder.us, hogy elmondja.

1. Menj a Geocoder.us oldalra, és írd be a címedet a keresőmezőbe.
2. Másolja a szélességi szám első számát (anélkül, hogy egy levél lenne előtte), és illessze be egy szöveges fájlba. Nem szükséges a fok (º) jelző.
3. Másolja az első számot a hosszúságra (ismét levél nélkül), és illessze be a szöveges fájlba.

A szélesség és a hosszúság a következőképpen néz ki:

40.756076-73.990838

A Geocoder.us csak az USA-beli címeknél működik, ha egy másik ország koordinátáit is meg kell keresned, akkor egy hasonló eszközt kell keresned a régióban.

03. oldal, 05. o

A térkép hozzáadása a weboldalhoz

Először is, Adja hozzá a Map Script-ot a

Dokumentumát

Nyissa meg a weboldalt, és adja hozzá a következőhöz: FEJ a dokumentumot.

Módosítsa a kiemelt részt a 2. lépésben leírt szélességi és hosszúsági számokra.

Másodszor, adja hozzá a térképelemet az oldalához

Miután az összes szkript eleme hozzá lett adva FEJ a dokumentumot, akkor helyezze el a térképet az oldalon. Ehhez a DIV elem a id = "térkép-vászon" tulajdonság. Azt javaslom, hogy ezt a divot is szélességgel és magassággal állítsa be, amely illeszkedik az oldalára:

Végül, feltöltés és tesztelés

Az utolsó dolog, hogy töltsd fel az oldaladat és teszteld, hogy a térkép megjelenik. Íme egy példa egy Google térképre az oldalon. Fontos megjegyezni, hogy a About.com CMS működési módja miatt kattints a linkre, hogy megjelenjen a térkép. Ez nem lesz így az oldalon.

Ha a térkép nem jelenik meg, próbálja meg inicializálni azt a-val TEST tulajdonság:

onload = "inicializálására ()" >

A térkép nem töltődik be:

• Keresse meg a JavaScript beírását, beleértve az esetet. A JavaScript a kis- és nagybetűket érzékeli
• Győződjön meg róla, hogy a zoomolás és központ beállított beállítások.
• Győződjön meg arról, hogy a DIV az elem a megfelelő azonosítóval rendelkező oldalon található.
• Győződjön meg arról, hogy a DIV az elemnek magassága van.

04. 05. sz

Jelölje be a térképet

De mi a jó az Ön helyének térképe, ha nincs olyan marker, amely megmondja az embereknek, hogy hova kellene menniük?

A normál Google Térkép piros jelölő hozzáadásához adja hozzá a parancsfájlhoz a következőt var map = … vonal:

var myLatlng = új google.maps.LatLng ( szélesség hosszúság );var marker = új google.maps.Marker ({pozíció: myLatlng,térkép: térkép,cím:" Korábbi székház '});

Módosítsa a kijelölt szöveget a szélességi és hosszúsági fokára, valamint arra a címre, amelyet meg szeretne jeleníteni, ha az emberek a marker fölé mutatnak.

Hozzáadhat annyi jelölőt az oldalhoz, csak úgy, hogy új változókat adjon meg új koordinátákkal és címekkel, de ha a térkép túl kicsi ahhoz, hogy megjelenítse az összes jelölőt, akkor csak akkor jelenik meg, ha az olvasó kicsinyít.

var latlng 2 = új google.maps.LatLng ( 37.3316591,-122.0301778 );var myMarker 2 = új google.maps.Marker ({pozíció: latlng 2 ,térkép: térkép,cím:" Apple Computer '});

Íme egy példa egy Google térképen, amely egy jelölővel rendelkezik. Fontos megjegyezni, hogy a About.com CMS működési módja miatt kattints a linkre, hogy megjelenjen a térkép. Ez nem lesz így az oldalon.

05. 05

Adjon hozzá egy második (vagy több) térképet az Ön oldalához

Ha megnézted a Google Maps oldalam példányát, akkor észre fogod venni, hogy több térképem is szerepel az oldalon. Ez nagyon könnyű. Itt van, hogyan.

1. Kapja meg a megjeleníteni kívánt térképek szélességi és hosszúsági fokát, amint ezt a bemutató 2. lépésében megtudtuk.
2. Helyezze be az első térképet, ahogy tanultuk a 3. lépésben. Ha azt szeretné, hogy a térkép legyen jelölő, add hozzá a jelölőt a 4. lépésben.
3. A második térképhez 3 új sort kell hozzáadnia az initialize () scripthez:var latlng2 = új google.maps.LatLng ( második koordinátákat );var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = új google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Ha az új térképen is egy jelölőt szeretne, adjon hozzá egy második jelölőt a második koordinátákon és a második térképen:var myMarker2 = új google.maps.Marker ({position: latlng2 , térkép: map2 , cím: " A megjelölés címe ' });
5. Ezután adja hozzá a második helyet, ahová a második térképet szeretné. És győződjön meg róla, hogy megadja id = "map_canvas_2" ID.
6. Amikor betöltődik az oldala, két térkép jelenik meg

Itt van egy olyan oldal kódja, amelyen két Google térkép található: