01 од 05
Добијте клуч за API за Google Maps за Вашето место
Најдобар начин да додадете карта на Google на вашата веб-страница е да го користите API за Google Maps. И Google препорачува да добиете API клуч за да ги користите мапите.
Не сте обврзани да добиете API клуч за користење на API на Google Maps AP3, но тоа е многу корисно бидејќи ви овозможува да го надгледувате користењето и да платите за дополнителен пристап. API на Google Maps AP3 има квота од 1 барање во секунда по корисник до максимум 25.000 барања дневно. Доколку вашите страници ги надминат тие граници, ќе треба да овозможите платежна, за да добиете повеќе.
Како да добиете клуч за API за Google Maps
- Пријавете се во Google со вашата сметка на Google.
- Одете во Конзолата за програмери
- Движете се низ листата и пронајдете API на Google Maps API v3, а потоа кликнете го копчето "OFF" за да го вклучите.
- Прочитајте и се согласувате со условите.
- Одете во конзолата за API и одберете "Access API" од левото мени
- Во делот "Пристап просто API" кликнете на копчето "Креирај нов сервер клуч ...".
- Внесете ја IP адресата на вашиот веб сервер. Ова е ИП каде што вашите барања за Мапи ќе доаѓаат. Ако не ја знаете вашата IP адреса, можете да го погледнете.
- Копирајте го текстот во линијата "API клуч:" (не вклучувајќи го и тој наслов). Ова е вашиот API-клуч за вашите карти.
02 од 05
Конвертирај ја вашата адреса до координатите
За да користите Google Maps на вашите веб-страници, треба да имате ширина и должина за локацијата. Можете да ги добиете овие од GPS или можете да користите онлајн алатка како Geocoder.us за да ви кажам.
- Одете во Geocoder.us и внесете ја вашата адреса во полето за пребарување.
- Копирајте го првиот број за ширина (без писмо однапред) и ставете го во текстуална датотека. Не ви е потребен индикатор степен (º).
- Копирајте го првиот број за должина (повторно без писмо однапред) и ставете го во вашата текстуална датотека.
Вашата ширина и должина ќе изгледаат вака:
40.756076
-73.990838
Geocoder.us работи само за адреси во САД, ако треба да ги добиете координатите во друга земја, треба да барате слична алатка во вашиот регион.
03 од 05
Додавање на мапата на вашата веб-страница
Прво, додадете го Скриптот на сајтот до
на вашиот документ
Отворете ја вашата веб-страница и додајте го следново во глава на вашиот документ.
Променете го означениот дел со броевите на ширина и должина што сте ги запишале во чекор два.
Второ, додајте го елементот на карта на вашата страница
Откако ќе ги додадете сите елементи на скрипта додадени во горниот дел од документот, треба да ја поставите вашата карта на страната. Ова го правите со додавање на елемент DIV со атрибут id = "map-canvas". Ви препорачувам исто така да стилизирате овој div со ширина и висина што ќе се вклопат на вашата страница:
Конечно, Подигни и тестирај
Последното нешто што треба да направите е да ја поставите вашата страница и да тестирате дека вашата карта го прикажува. Еве пример за карта на Google на страницата. Имајте на ум дека, поради начинот на работа на CMS.com, ќе треба да кликнете на линкот за да ја видите мапата. Ова нема да биде случај на вашата страница.
Ако вашата карта не се појави, обидете се со иницијализирање со атрибут BODY:
onload = "иницијализира ()" >
Други работи за да проверите дали вашата карта не се вчитува вклучуваат:
- Побарајте грешки во вашиот JavaScript, вклучувајќи го и случајот. JavaScript е чувствителен на големи букви.
- Проверете дали ги имате поставено опциите за зумирање и центри.
- Осигурајте се дека вашиот DIV елемент е на страницата со точниот идентификатор.
- Осигурајте се дека вашиот DIV елемент има висина.
04 од 05
Додајте ознака на вашата карта
Но, што е добра карта на вашата локација ако нема маркер кој им кажува на луѓето каде треба да одат?
За да додадете стандарден црвен маркер на "Карти на Google", додадете го следново во вашата скрипта под мапата var ... =
var myLatlng = new google.maps.LatLng ( географска ширина, должина );
var marker = new google.maps.Marker ({
позиција: myLatlng,
карта: мапа,
наслов: " Поранешен штаб за "
});
Променете го означениот текст на вашата географска ширина и должина и насловот што сакате да го прикажете кога луѓето лебдат над маркерот.
Можете да додадете колку маркери на страната сакате, само додајте нови варијабли со нови координати и наслови, но ако картата е премногу мала за да ги прикажете сите маркери, тие нема да се прикажуваат, освен ако читателот ќе зумира.
var latlng 2 = нов google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = new google.maps.Marker ({
позиција: latlng 2 ,
карта: мапа,
наслов: " Apple Computer "
});
Еве пример за мапа на Google со маркер. Имајте на ум дека, поради начинот на кој функционира CMS за CMS, треба да кликнете на линкот за да ја прикажете мапата. Ова нема да биде случај на вашата страница.
05 од 05
Додајте втора (или повеќе) карта на вашата страница
Ако сте го разгледале мојот пример на страницата за мапи на Google, ќе забележите дека имам повеќе од една карта прикажана на страната. Ова е многу лесно да се направи. Еве како.
- Добијте ја широчината и должината на сите мапи што сакате да ги прикажете како што научивме во чекор 2 од ова упатство.
- Внесете ја првата мапа како што научивме во чекор 3 од ова упатство. Ако сакате мапата да има маркер, додадете го маркерот како во чекор 4.
- За втората карта, ќе треба да додадете 3 нови линии во твојата иницијализирана () скрипта:
var latlng2 = нов google.maps.LatLng ( втората координати );
var myOptions2 = {зумирање: 18, центар: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2); - Ако сакате маркер и на новата мапа исто така, додадете втор маркер кој покажува кон втората координати и втората мапа:
var myMarker2 = new google.maps.Marker ({позиција: latlng2 , мапа: map2 , насловот: " Вашиот наслов на маркери "}); - Потоа додадете второ
каде што сакате втората мапа. И не заборавајте да му дадете ID = "map_canvas_2" ID.
- Кога ќе се вчита вашата страница, ќе се прикажат две мапи
Еве го кодот на страница со две карти на Google на неа: