Як дадаць карту Google на свой вэб-старонкі

01 з 05

Атрымаць ключ API Карт Google для Вашага сайта

Лепшы спосаб дадаць карту Google на свой сайт, каб выкарыстоўваць Google Maps API. І Google рэкамендуе атрымаць ключ API для таго, каб выкарыстоўваць карты.

Вы не абавязаны атрымаць ключ API для выкарыстання Google Maps API v3, але гэта вельмі карысна, паколькі гэта дазваляе адсочваць ваша выкарыстанне і плаціць за дадатковы доступ. Google Maps API v3 мае квоту 1 запыт у секунду для кожнага карыстальніка на максімум 25000 запытаў у дзень. Калі вашы старонкі перавышаюць гэтыя межы Вам неабходна ўключыць білінг для таго, каб атрымаць больш.

Як атрымаць ключ API Карт Google

1. Уваход у Google, выкарыстоўваючы свой уліковы запіс Google.
2. Перайсці да кансолі распрацоўніка
3. Пракруціць спіс і знайдзіце API v3 Google Maps, а затым націсніце кнопку «OFF», каб уключыць яго.
4. Чытайце і згодныя з умовамі.
5. Перайсці да кансолі API, і выберыце «Доступ да API» з меню злева
6. У раздзеле «Simple Access API», націсніце на кнопку «Стварыць новы ключ сервера ...».
7. Калі ласка, увядзіце IP-адрас вашага вэб-сервера. Гэта IP, дзе вашыя запыты Карты будуць прыходзіць с. Калі вы не ведаеце свой IP-адрас, вы можаце паглядзець яго.
8. Скапіюйце тэкст на «ключ API:» лінія (не уключаючы гэты тытул). Гэта ваш ключ API для карт.

02 з 05

Пераўтварыць Ваш адрас для Каардынаты

Для таго, каб выкарыстоўваць Google Maps на вэб-старонках, вы павінны мець шырыню і даўгату месца. Вы можаце атрымаць іх ад GPS або вы можаце выкарыстоўваць онлайн-інструмент, як Geocoder.us сказаць вам.

1. Перайсці да Geocoder.us і ўвядзіце свой адрас у поле пошуку.
2. Скапіруйце першы нумар для шыраты (без літары спераду) і ўставіць яго ў тэкставы файл. Вам не трэба індыкатар ступені (º).
3. Скапіруйце першы нумар для даўгаты (зноў жа без літары спераду) і ўставіць яго ў тэкставы файл.

Ваша ёсьць шырыня і будзе выглядаць прыкладна так:

40.756076
-73,990838

Geocoder.us працуе толькі для адрасоў ў ЗША, калі вам трэба атрымаць каардынаты ў іншай краіне, вы павінны шукаць падобны інструмент у вашым рэгіёне.

03 з 05

Даданне карты на вэб-старонку

Па-першае, дадайце Карта сцэнара да

ваш дакумент

Адкрыйце вэб-старонку і дадайце наступны радок у пачатку вашага дакумента.

Змена выдзеленай частцы шыраты і даўгаты лічбы, якія вы запісалі ў два кроку.

Па-другое, дадайце элемент карты на вашай старонцы

Пасля таго, як у вас ёсць усе элементы сцэнара, дададзеныя ў галаву свой дакумэнт, неабходна змясціць карту на старонцы. Вы можаце зрабіць гэта, дадаўшы DIV элемент з ідэнтыфікатарам = атрыбут «МАП-палатно". Я рэкамендую вам таксама стыль гэта DIV з шырынёй і вышынёй, якая будзе адпавядаць на старонцы:

Нарэшце, Upload і выпрабаванні

Апошняе, што трэба зрабіць, гэта загрузіць старонку і праверце, што ваша карта дысплеях. Вось прыклад карты Google на гэтай старонцы. Звярніце ўвагу, што з-за тым, як About.com CMS працуе, вы павінны націснуць на спасылку, каб атрымаць карту, каб з'явіцца. Гэта не будзе мець месца на вашай старонцы.

Калі ваша карта не адлюстроўваецца, паспрабуйце ініцыялізаваць яго з атрыбутам ЦЕЛА:

OnLoad = "ініцыялізацыя ()">

Іншыя рэчы, каб праверыць, калі ваша карта не загружаецца, ўключаюць:

• Шукайце памылкі друку ў вашым JavaScript, у тым ліку выпадку. JavaScript адчувальны да рэгістра.
• Пераканайцеся, што ў вас ёсць зум і цэнтр варыянтаў набору.
• Пераканайцеся, што ваш DIV элемент на старонцы з правільным ідэнтыфікатарам.
• Пераканайцеся, што ваш DIV элемент мае вышыню.

04 з 05

Дадаць маркер на карту

Але якая карысць карта вашага месцазнаходжання, калі няма маркера казаць людзям, дзе яны павінны ісці?

Каб дадаць стандартны Google Maps чырвоны маркер дадаць наступны радок у ваш сцэнар ніжэй вар карта = ... лініі:

вар myLatlng = новы google.maps.LatLng (шырата, даўгата);
вар маркер = новы google.maps.Marker ({
пазіцыя: myLatlng,
карта: карта,
Назва: «Былы штаб - кватэры Пададзены»
});

Змяніць вылучаны тэкст вашай шыраты і даўгаты і назвы вы хочаце, каб з'явіцца, калі людзі параць над маркерам.

Вы можаце дадаць столькі маркераў на старонцы, як вам падабаецца, проста дадаць новыя зменныя з новымі каардынатамі і званнямі, але калі карта занадта малы, каб адлюстраваць усе маркеры, яны не будуць адлюстроўвацца, калі чытач не ад'язджае.

вар LatLng 2 = новы google.maps.LatLng (37.3316591, -122,0301778);
вар myMarker 2 = новы google.maps.Marker ({
Становішча: LatLng 2,
карта: карта,
Назва: "Apple Computer"
});

Вось прыклад карты Google з маркерам. Звярніце ўвагу, што з-за тым, як About.com CMS працуе, вы павінны націснуць на спасылку, каб атрымаць карту, каб з'явіцца. Гэта не будзе мець месца на вашай старонцы.

05 з 05

Даданне другога (ці больш) Карты на старонку

Калі вы глядзелі на маім прыкладзе карты старонцы Google вы заўважыце, што ў мяне ёсць больш чым адну карты, якая адлюстроўваецца на старонцы. Гэта вельмі лёгка зрабіць. Вось як.

1. Атрымаць шырыню і даўгату усіх карт, якія вы хочаце адлюстраваць, як мы даведаліся, на кроку 2 дадзенага кіраўніцтва.
2. Устаўце першую карту, як мы даведаліся, на кроку 3 гэтага ўрока. Калі вы хочаце, каб карта ёсць маркер, дадаць маркер, як у кроку 4.
3. На другі карце, вам трэба будзе дадаць 3 новых радкі ў Initialize () скрыпт:
   вар latlng2 = новы google.maps.LatLng (другая каардыната);
   вар myOptions2 = {павелічэнне: 18, цэнтр: latlng2, MapTypeId: google.maps.MapTypeId.ROADMAP};
   вар map2 = новы google.maps.Map (document.getElementById ( "map_canvas_2"), myOptions2);
4. Калі вы хочаце маркер на новай карце таксама дадаць другі маркер, які паказвае на другі каардынаце і другі карце:
   вар myMarker2 = новы google.maps.Marker ({пазіцыя: latlng2, карта: map2, назва: "Ваш Маркер Title"});
5. Затым дадаць другі

   дзе вы хочаце другую карту. І не забудзьцеся даць яму ID = «map_canvas_2» ID.

6. Калі старонка загружаецца, дзве карты будуць адлюстроўвацца

Вось код старонкі з двума картамі Google на ім: