Hogyan adhat hozzá Google Térképet weboldalához?

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 amerikai címeknél működik, ha egy másik ország koordinátáit meg kell keresned, akkor hasonló eszközre 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 dokumentum fejlécéhez.

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 dokumentumot hozzáadta a dokumentum fejlécéhez, elhelyeznie kell a térképet az oldalon. Ezt úgy teheti meg, ha hozzáad egy DIV elemet az id = "map-canvas" attribútummal. 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 egy BODY attribútummal:

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

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 zoom és a középső beállítások meg vannak adva.
• Győződjön meg arról, hogy az Ön DIV eleme a megfelelő azonosítójú oldalon található.
• Győződjön meg róla, hogy a DIV elem magasságban 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?

Egy szabványos Google Térkép piros jelölő hozzáadásához vegye fel a scripthez a következő mappát a var map = ... sorban:

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 "
});

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áta );
   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 ({pozíció: latlng2 , térkép: map2 , cím: " A jelzőcímed "});
5. Add meg a második

   ahol szeretné a második térképet. És mindenképpen adjon id = "map_canvas_2" azonosítót.

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ó: