Создание карты Basic Google
Этот пример создает карту Google с центром в Лондоне, Англия:
пример
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js"></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>
Попробуй сам " Остальная часть этой страницы описывает пример, приведенный выше, шаг за шагом.
1. Загрузите API Google
API Карт Google является библиотекой JavaScript. Его можно добавить на веб - страницу с <script> тег:
<script src="http://maps.googleapis.com/maps/api/js"></script>2. Установить Свойства карты
Создайте функцию для инициализации карты:
function initialize() {
}В функции инициализации, создать объект (mapProp) для определения свойств карты:
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};Центр недвижимости указывает , где центр карты. Создать LatLng объект в центр карты с определенной точки. Проходят координаты в порядке: широта, долгота.
Свойство масштабирования определяет уровень масштабирования для карты. зум: 0 показывает карту Земли полностью масштаб изображения. Более высокие уровни масштабирования увеличить при более высоком разрешении.
Свойство MapTypeId определяет тип карты для отображения. Следующие типы карт поддерживаются:
- ROADMAP (normal, default 2D map) по (normal, default 2D map)
- СПУТНИК (photographic map)
- HYBRID (photographic map + roads and city names)
- TERRAIN (map with mountains, rivers, etc.)
3. Создать контейнер карты
Создание <div> элемент для хранения карты. Используйте CSS, чтобы размер элемента:
<div id="googleMap" style="width:500px;height:380px;"></div>Карта будет всегда "inherit" его размер от своего элемента контейнера.
4. Создайте карту объекта
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);Приведенный выше код создает новую карту внутри <div> элемент с идентификатором = "Googlemap", используя параметры, которые передаются (mapProp) .
5. Добавьте прослушиватель события для загрузки карты
Добавьте DOM - приемник , который будет выполнять initialize() функцию на окне нагрузки (when the page is loaded) :
google.maps.event.addDomListener(window, 'load', initialize);
Асинхронное Загрузка
Кроме того, можно загрузить API Карт Google по требованию.
В приведенном ниже примере используется window.onload для загрузки API Карт Google после того, как страница полностью загружена.
loadScript() функция создает API Карт Google <script> тегов. Кроме того, обратный вызов = инициализировать параметр добавляется в конец URL - адреса , чтобы выполнить initialize() функции после того , как API полностью загружен:
пример
function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
Попробуй сам " Несколько карт
В приведенном ниже примере определены четыре карты на одной веб-странице (четыре карты с различными типами карт):
пример
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
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 API Key
Google позволяет ваш веб-сайт, чтобы вызвать любой Google API, многие тысячи раз в день.
Если вы планируете для более тяжелого трафика, вы должны получить бесплатный ключ API от Google.
Перейти к https://console.developers.google.com , чтобы получить бесплатный ключ.
Карты Google рассчитывает найти ключ API в ключевого параметра при загрузке API:
<script src="http://maps.googleapis.com/maps/api/js? key=YOUR_KEY "></script>