Пример Google Maps API hello world
Простое руководство hello world по отображению Google Maps на веб-странице черезGoogle Maps Javascript API v3.
В этом уроке мы покажем вам, как отобразить карту с центром в «Малим Навар, Малайзия» (мой родной город), и использовать «маркер (маленький значок)», чтобы определить местоположение на карте.
Полный пример…
Google Map Hello World Example
Смотрите следующее объяснение.
1. Где отобразить карту Google
Карта Google будет отображаться на элементе с идентификатором «map_container».
//... //...
2. Загрузить Google Maps API
Чтобы использовать API Карт Google, вам нужно только включить следующий JavaScript на своей веб-странице.
What is sensor?
Датчик (обычно датчик мобильного телефона) используется для определения местоположения пользователя.
3. Широта и долгота
Каждое место на Земле может быть представлено широтой и долготой или так называемым «geographic coordinates», обратитесь к этомуwiki geographic coordinate для дальнейшего объяснения.
Note
Лично я не совсем понимаю, как работают широта и долгота, проще говоря, просто подумайте о широте с координатой y и долготе с координатой x. Был бы признателен, если кто-то объясняет больше об этом :)
В этом примере вы можете найти широту и долготу «Малим Навар» черезlatitude and longitude finder website. Затем укажите ваши широту и долготу как «var latlng = new google.maps.LatLng(Latitude, Longitude)».
Geocoding
Процесс преобразования адреса в «широту и долготу» известен как геокодирование. Мы предоставим больше примеров геокодирования в следующих уроках.
4. Настройте параметры Google Maps
Настраиваемые значения не требуют пояснений. Обратитесь к этой ссылке для получения списка поддерживаемыхGoogle map options.
Отобразите карту Google в идентификаторе элемента HTML с именем «map_container».
function loadMap() {
//...
var map = new google.maps.Map(document.getElementById("map_container"),myOptions);
//...
}
Создайте маркер (маленький значок), настройте положение дисплея и предварительно определенное окно сообщения, когда вы наводите курсор мыши на маркер.
function loadMap() {
//...
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"my hometown, Malim Nawar!"
});
//...
}
5. Загрузить Google Maps
Последний шаг, просто загрузите функцию через тело нагрузки.