Latest web development tutorials

Google Maps базы

Создание простой Google Maps

Теперь давайте создадим простой Google Maps.

Ниже приведен график, показывающий Google Maps Лондон:

примеров

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

</body>
</html>

Попробуйте »

Примеры аналитических

В приведенном выше примере мы создаем процесс для разрешения карты Google.

Зачем объявлять HTML5 приложений?

<!DOCTYPE html>

Большинство браузеров используют "стандартную модель" HTML5 рендеринга страниц документа, а это значит, что ваше приложение совместимо со всеми основными браузерами.

Кроме того, если нет DOCTYPE тег, браузер использовать смешанный режим (режим совместимости) для визуализации содержимого страницы.

Совет: Следует отметить , что некоторые "беспорядочном режиме" в CSS и вы не можете использовать стандартный режим.В конкретном приложении, все должны наследовать от родительских элементов блока на основе процента от размера. Если вы не указали размер модуля в материнской компании, значение по умолчанию 0 х 0 пикселей. Если вы хотите использовать проценты, могут быть объявлены в теге <STYLE>, следующим образом:

<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>

Эта карта шоу модуль Объявление стиля (GoogleMap) должна быть HTML высота 100%.

Добавить Google Maps API Key

В следующем примере первая <сценарий> тег должен быть включен в Google Maps API:

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

Google-сгенерированный ключ API размещены включевых параметров(ключ= YOUR_API_KEY).

Параметр датчика требуется, параметр используется для указания того, использует ли приложение датчик ( по аналогии с GPS - навигации) , чтобы найти местоположение пользователя. Значения параметров могут быть установлены в истинным или ложным.

HTTPS

Если ваше приложение является безопасным HTTP: приложение (HTTPS HTTP Secure), вы можете использовать HTTPS для загрузки API Карт Google:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

Асинхронная загрузка

Кроме того, мы можем также загрузить API Карт Google после того, как страница полностью загружена.

В следующем примере используется window.onload для реализации полной загрузки при загрузке страницы Google Maps. loadScript () функция создает загрузить API Карт Google <SCRIPT> тег. Также в конце этикетки на обратный вызов = инициализации параметров, инициализации () будет выполняться после того, как API полностью загружен в качестве функции обратного вызова:

примеров

function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js? key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; document.body.appendChild(script);
}

window.onload = loadScript;

Попробуйте »

Пользовательские Свойства карты

Перед инициализацией карты, нам нужно создать объект Map для определения свойств карты объекта:

var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

центр (центр)

Центр атрибут определяет центр карты, который по координатам (широта, долгота), чтобы создать центральную точку на карте.

Увеличить (Увеличить Серия)

Увеличить карту масштабирования свойство определяет количество этапов. зум: 0 показать полный масштаб всю карту Земли.

MapTypeId (начальная типа карты)

MapTypeId атрибут типа определяет начальную карту.

MapTypeId включает в себя следующие четыре типа:

  • google.maps.MapTypeId.HYBRID: спутниковые изображения показывают главную улицу прозрачного слоя
  • google.maps.MapTypeId.ROADMAP: отображение нормальной карты улиц
  • google.maps.MapTypeId.SATELLITE: Показать спутниковые изображения
  • google.maps.MapTypeId.TERRAIN: отображает карты с физическими особенностями (например, топографии и растительности) в

Где для отображения Google Maps

Как правило, используется в элементе Google Maps <div>:

<div id="googleMap" style="width:500px;height:380px;"></div>

Примечание: Размер карты будет Див установлен , чтобы показать размер карты, поэтому мы можем установить размер карты в <div> элемент.

Создание карты объекта

var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);

Приведенный выше код использует параметр (mapProp) в элементе <div> (идентификатор Googlemap) создает новую карту.

Совет: Если выхотите создать несколько страниц карты, вам нужно только добавить новые объекты на карте может быть.

Следующий пример определяет четыре карты экземпляра (карты с использованием четырех различных типов карт):

примеров

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);

Попробуйте »

Загрузка карты

Карта окно для инициализации объекта после загрузки, выполнив функцию инициализации (), которая гарантирует, что страница была полностью загружена перед загрузкой Карт Google:

google.maps.event.addDomListener(window, 'load', initialize);