Шта знати
- Иди на Конзола Гоогле Цлоуд Платформ и креирајте или изаберите пројекат, а затим кликните Настави. На Акредитиви страницу, узмите АПИ кључ.
- Уметните ЈаваСцрипт код (приказан доле) у одељак ТЕЛО ХТМЛ документа.
- У глави ХТМЛ документа наведите ЦСС ограничења за мапу, укључујући величину, боје и положај странице.
Овај чланак објашњава како да у своју веб страницу уметнете Гоогле мапу са маркером локације. Овај поступак укључује добијање посебног софтверског кључа од Гоогле-а, а затим додавање релевантног ЈаваСцрипт-а на страницу.
Набавите АПИ кључ Гоогле Мапс
Да би заштитио своје сервере од бомбардирања захтевима за мапама и претраживањима локације, Гоогле ограничава приступ својој бази података Мапс. Морате се регистровати код Гоогле-а као програмера да бисте добили јединствени кључ за коришћење интерфејса за програмирање апликација за тражење података са сервера Мапс. АПИ кључ је бесплатан, осим ако вам није потребан тешки приступ Гоогле-овим серверима (на пример, за развој веб апликације).
Да бисте регистровали свој АПИ кључ:
Иди на Конзола Гоогле Цлоуд Платформ и, након пријављивања са Гоогле налогом, направите нови пројекат или одаберите постојећи.
Кликните Настави да бисте омогућили АПИ и све повезане услуге.
На Акредитиви страницу, узмите АПИ кључ. По потреби поставите релевантна ограничења на кључу.
Обезбедите свој АПИ кључ помоћу најбоље праксе препоручује Гоогле.
Ако верујете да ће вам карта бити потребна чешће него што вам дозвољава бесплатна квота, подесите обрачун са Гоогле-ом. Већина веб локација, посебно блогови са малим прометом или веб локације са нишама, вероватно неће потрошити већи део додељене квоте.
Уметните ЈаваСцрипт на своју веб страницу
Уметните следећи код на своју веб страницу, у одељак ТЕЛО ХТМЛ документа:
// Покрени и додај функцију мапе инитМап () {
// Локација заставе вар флаг = {лат: КСКСКС, лнг: ИИИ};
// Мапа, центрирана на флаг вар мап = нев гоогле.мапс. Мапа (доцумент.гетЕлементБиИд ('мапа'), {зум: 4, центар: застава});
// Ознака, постављена на флаг вар маркер = нев гоогле.мапс. Маркер ({позиција: застава, мапа: мапа}); } срц = " https://maps.googleapis.com/maps/api/js? кеи = ИОУР_АПИ_КЕИ & цаллбацк = инитМап ">
У овом коду промените следеће:
- Заменити застава са именом које упућује на локацију коју сте закачили. Нека буде једноставно и кратко (на пример кућа или канцеларија или парис или детроит). Можете покренути овај код одлазећи застава такво какво јесте, али промена имена подржава поновну употребу овог кода на истој страници за уграђивање неколико различитих мапа.
- Заменити КСКСКС и ИИИ са географском ширином и дужином, у децималним вредностима, локације маркера на мапи. Морате заменити ове вредности да би се карта правилно приказала. Географску ширину и дужину можете лако пронаћи тако што ћете отворити Гоогле Мапс и десним тастером миша кликнути на тачну локацију коју намеравате да означите. У контекстном менију изаберите Шта је овде? да бисте видели географску ширину и дужину.
- Заменити ИОУР_АПИ_КЕИ помоћу АПИ кључа који сте добили од Гоогле-а. Не стављајте размаке између знака једнакости и знака &. Без кључа, упит неће успети и мапа се неће правилно приказати.
Оптималне праксе
У глави ХТМЛ документа наведите ЦСС ограничења за мапу, укључујући величину, боје и положај странице.
Гооглеова скрипта мапе садржи атрибуте попут зум и центар који су отворени за модификације крајњег корисника. Ова напреднија техника подржана је Гоогле-овом документацијом за програмере.
АПИ Гоогле мапа је драгоцена имовина. Гоогле-ова упутства за најбољу праксу нуде изврсне савете за заштиту кључа од злоупотребе од стране других. Одговарајућа сигурност је нарочито важна ако сте поставили систем плаћања за приступ АПИ-ју, јер бисте се могли суочити са великим рачуном ако вам украду акредитиве. Конкретно, пример који смо овде приказали ради уградите АПИ кључ директно у код - то смо учинили у сврху демонстрације поступка. Међутим, у производном окружењу је боље навести променљиве окружења за кључ, уместо да га директно убаците.