Како додати Гоогле мапу на своју веб страницу

01 од 05

Преузмите кључни кључ Гоогле Мапс за вашу веб локацију

Најбољи начин да додате Гоогле мапу на вашу веб локацију је да користите Гоогле Мапс АПИ. Гоогле препоручује да добијете АПИ кључ како би користили мапе.

Није вам потребно да добијете АПИ кључ за коришћење Гоогле Мапс АПИ в3, али је веома корисно јер вам омогућава да надгледате своју употребу и платите додатни приступ. Гоогле Мапс АПИ в3 има квоту од 1 захтева у секунди по кориснику до максимално 25.000 захтева дневно. Ако ваше странице прелазе та ограничења, мораћете да омогућите фактурисање како бисте добили више.

Како да добијете Гоогле Мапс АПИ кључ

1. Пријавите се на Гоогле користећи свој Гоогле налог.
2. Идите у конзолу за програмере
3. Померите се кроз листу и пронађите АПИ Гоогле Мапс АПИ в3, а затим кликните на дугме "ОФФ" да бисте га укључили.
4. Прочитајте и прихватите услове.
5. Идите на конзолу АПИ-ја и одаберите "АПИ Аццесс" из левог менија
6. У одељку "Једноставан приступ АПИ-у" кликните на дугме "Креирај нови кључ ...".
7. Унесите ИП адресу вашег веб сервера. Ово је ИП адреса у којој ће потражити Мапе. Ако не знате своју ИП адресу, можете је потражити.
8. Копирајте текст на линију "АПИ кључ:" (не укључујући ту титулу). Ово је ваш АПИ кључ за мапе.

02 од 05

Претворите своју адресу у координате

Да бисте користили Гоогле мапе на својим веб страницама, потребно је да имате географску ширину и дужину за локацију. Можете их набавити из ГПС-а или можете да користите онлине алат као што је Геоцодер.ус.

1. Идите на Геоцодер.ус и укуцајте своју адресу у поље за претрагу.
2. Копирајте први број за ширину (без слова испред) и залепите је у текстуалну датотеку. Не треба вам индикатор степена (º).
3. Копирајте први број за дужину (опет без писма испред) и залепите је у вашу текстуалну датотеку.

Ваша географска ширина и дужина ће изгледати овако:

40.756076
-73.990838

Геоцодер.ус ради само за адресе САД-а, уколико желите да добијете координате у другој земљи, требало би да тражите сличну алатку у вашем региону.

03 од 05

Додавање Мапе на Вашу Веб страницу

Прво, додајте скрипту мапу на

Вашег документа

Отворите своју веб страницу и додајте следеће у ГЛАВУ вашег документа.

Промените означени део на бројеве географске ширине и дужине које сте написали у другом кораку.

Друго, додајте елемент карте на страницу

Када имате све елементе скрипте додате у ХЕАД вашег документа, потребно је да поставите своју мапу на страницу. То чините додавањем ДИВ елемента са ид = "мап-цанвас" атрибутом. Препоручујем вам да обликујете овај див са ширином и висином која ће се уклапати на вашу страницу:

Коначно, Уплоад анд Тест

Последња ствар је да отпремите своју страницу и тестирате своју мапу. Ево примера Гоогле мапе на страници. Напомена, због начина на који функционише Абоут.цом ЦМС, морате кликнути на везу да бисте добили мапу која ће се појавити. Ово неће бити случај на вашој страници.

Ако се ваша мапа не појави, покушајте да је иницијализујете са атрибутом БОДИ:

онлоад = "инитиализе ()" >

Друге ствари које би провјериле да ли се ваша мапа не учитава укључују:

• Потражите грешку у вашем ЈаваСцрипт-у, укључујући случај. ЈаваСцрипт је осјетљив на слово.
• Уверите се да имате поставке зума и центра.
• Уверите се да је ваш ДИВ елемент на страници са исправним ИД-ом.
• Уверите се да ваш ДИВ елемент има висину.

04 од 05

Додајте маркер на своју мапу

Али шта је добра карта ваше локације ако нема маркера који говори људима где треба да иду?

Да бисте додали стандардни црвени маркер Гоогле мапе додајте следеће у своју скрипту испод вар мап = ... линија:

вар миЛатлнг = нев гоогле.мапс.ЛатЛнг ( географска ширина, географска ширина );
вар маркер = нови гоогле.мапс.Маркер ({
позиција: миЛатлнг,
мапа: мапа,
наслов: " бивши хеадкуартерс "
});

Промените означени текст на своју географску ширину и дужину и наслов који желите да се појави када људи лебде преко маркера.

Можете додати што више маркера на страницу колико желите, само додајте нове варијабле са новим координатама и насловима, али ако је мапа премала да би приказала све маркере, неће се приказати ако читатељ не изостави.

вар латлнг 2 = нови гоогле.мапс.ЛатЛнг ( 37.3316591, -122.0301778 );
вар миМаркер 2 = нови гоогле.мапс.Маркер ({
позиција: латлнг 2 ,
мапа: мапа,
назив: " Аппле Цомпутер "
});

Ево примера Гоогле мапе са маркером. Напомена, због начина на који функционише Абоут.цом ЦМС, морате кликнути на везу да бисте добили мапу која ће се појавити. Ово неће бити случај на вашој страници.

05 од 05

Додајте другу (или више) карту на страницу

Ако сте погледали на мој пример Гоогле мапе, приметићете да на страници има више од једне мапе. Ово је врло лако учинити. Ево како.

1. Преузмите географску ширину и дужину свих мапа које желите да прикажете како смо сазнали у 2. кораку овог водича.
2. Убаците прву мапу како смо сазнали у 3. кораку овог водича. Ако желите да мапа има маркер, додајте маркер као у кораку 4.
3. За другу мапу, потребно је да додате 3 нове линије у ваш сцрипт инитиализе ():
   вар латлнг2 = нови гоогле.мапс.ЛатЛнг ( друга координата );
   вар миОптионс2 = {зумирање: 18, центар: латлнг2, мапТипеИд: гоогле.мапс.МапТипеИд.РОАДМАП};
   вар мап2 = нови гоогле.мапс.Мап (доцумент.гетЕлементБиИд ("мап_цанвас_2"), миОптионс2);
4. Ако желите и маркер на новој мапи, додајте други маркер који указује на друге координате и другу мапу:
   вар миМаркер2 = нев гоогле.мапс.Маркер ({поситион: латлнг2 , мап: мап2 , наслов: " Ваш наслов маркера "});
5. Затим додајте другу

   где желите другу карту. И будите сигурни да му дате ИД = "мап_цанвас_2" ИД.

6. Када се ваша страница учита, приказаће се две мапе

Ево шифре странице са две Гоогле карте на њему: