Встройте в свой веб-сайт готовые карты от Google

Планы и карты часто размещаются на сайтах компаний с целью помочь клиентам добраться до учреждения. И Карты Google могут стать отличным помощником. Ну разве не чудесно будет добавить к карте еще и логотип компании, указать место стоянки, ж/д вокзалы и т.д. Да так, чтобы найти вас не представляло ни малейшей трудности. На самом деле это очень просто сделать, и в этом уроке я расскажу вам как.

Обзор урока

o Google Maps API
o Получаем координаты
o Встраиваем карту в ваш сайт
o Добавляем маркеры
o Настройка маркеров
o Добавляем информационные блоки

Google Maps API

Google Maps API позволяет встраивать карты прямо в страницы вашего сайта. Для чего вам потребуется немного JavaScript, а для создания красивого оформления — немного CSS. Только что выпущена Google Maps API версия 3 и мы именно ее возьмем за основу. Вы можете ознакомиться со всей документацией на Google Labs, и пока будете просматривать информацию обязательно получите ключ к API Карт.

Получаем координаты

Полагаю, что вы, врядли, знаете точные координаты расположения вашей фирмы, поэтому объясню вам очень простой способ для их получения, который предлагает Google. Зная точный адрес вы можете вписать его в URL-адрес следующим образом:

http://maps.google.com/maps/geo?q=1+Infinite Liip,+Cupertino,+CA+95014,+USA&output=csv&oe=utf8&sensor=false&key=your_google_maps_api_key

Вписав его подобным образом в адресную строку, вы получите следующие данные:

Это координаты Центрального управления компании Apple в Купертино

Первое число - это константа, и 200 означает, что операция прошла успешно. Второе число указывает на сколько точно указывается адрес, в данном случае 8 говорит о довольно высокой точности. Два последних значения - это широта и долгота, именно они нам и нужны.

Встраиваем карту в ваш сайт

Теперь давайте, наконец, добавим карту на сайт! Откройте любимый HTML -редактор и создайте стандартный HTML-файл с кодировкой UTF-8. Сперва создадим центр проекции (точку фотографирования) и укажем в нашем HTML-файле путь на JavaScript, находящийся на сайте Google Code. Заключите следующие строчки между тегами <head> и </head>:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

В коде после ссылки идет свойство sensor=false. Так как нам не нужны сенсоры, GPS и нет необходимости определять чье-либо местонахождение.

Под кодом, который мы только что вставили, введите следующее:

 <script type="text/javascript">
 function initialize() {
 var latlng = new google.maps.LatLng(57.0442, 9.9116);
 var settings = {
 zoom: 15,
 center: latlng,
 mapTypeControl: true,
 mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
 navigationControl: true,
 navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };

Давайте немного разберемся с кодом. Во второй строке задаем функцию initialize(). В ней мы и зададим основные настройки нашей карты. В третьей строке вводим переменную latlng. latlng означает географические широту и долготу. Переменная содержит координаты, которые будем использовать как центр нашей карты.
Затем вводится переменная settings, содержащая большой список параметров:

- zoom задает, как вы, наверное, уже догались, на сколько будет увеличена карта.
- center задает центральную точку.

Прописывая latlng, мы ссылаемся на координаты уже прописанные в этой переменной.

Следующие параметры кода несколько минимализируют разметку карты. Кнопки управления в верхнем правом углу (Карта, Спутник, Ландшафт) заменяются на ниспадающее меню, и кнопки задающие масштаб заменяются на маленькие рычажки.

mapTypeId: google.maps.MapTypeId.ROADMAP определяет тип нашей карты, это будет дорожная карта, но вы легко можете сменить тип на SATELLITE (спутниковая карта), HYBRID (карта-гибрид) или TERRAIN (ландшафтная карта).

Далее пишем следующее:

var map = new google.maps.Map(document.getElementById("map_canvas"), 
settings);

В нем вводим переменную map, она определяет, что наша карта будет использовать все заданные выше настройки.

Пишем

}
</script>

и закрываем функцию, перейдем к созданию тела страницы:

<body onload="initialize()">
<div id="map_canvas" style="width:800px; height:500px"></div>
</body>

Таким образом мы заставляем наш сайт при загрузке активизировать функцию initialize() и задаем в теге <div> размер для нашей карты.

Добавляем маркеры

Пора добавить некоторую разметку. Давайте начнем с создания стандартного маркера:

Прямо под:

var map = new google.maps.Map(document.getElementById("map_canvas"), 
settings);

вводим следующее:

var companyPos = new google.maps.LatLng(57.0442, 9.9116);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
title:"Some title"
});

Итак, разберемся с кодом.

Сначала мы задали переменную companyPos, с помощью которой устанавливают расположение маркера. Далее, мы создали сам маркер посредством переменной companyMarker. Вы можете конечно вписать еще ряд параметров, а с теми, которые мы уже указали, я думаю все ясно.

Настройка маркеров

Хотя того, что мы уже сделали, вполне достаточно и ваш клиент легко вас найдет, мы можем нашу карту слегка приукрасить. Создайте в Photoshop изображение размером 100×50 пикселей подобное этому:

Далее создадим у нашего изображения тень

Теперь заменяем стандартный маркер этими изображениями, соответственно изменяем и код:

var companyLogo = new google.maps.MarkerImage('images/logo.png',
new google.maps.Size(100,50),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var companyShadow = new google.maps.MarkerImage('images/logo_shadow.png',
new google.maps.Size(130,50),
new google.maps.Point(0,0),
new google.maps.Point(65, 50)
);
var companyPos = new google.maps.LatLng(57.0442, 9.9116);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
icon: companyLogo,
shadow: companyShadow,
title:"Company Title",
});

Данный код тоже довольно простой. Переменная companyLogo указывает на название нашего логотипа, задает его размер, путь к нему и координаты расположения кончика логотипа (то есть то место, в котором наш логотип касается карты). Затем те же самые параметры настраиваем и для изображения тени с помощью переменной companyShadow. И наконец посредством переменной companyMarker мы выводим изображение и его тень на карту.

Чтобы добавить еще маркеры, воспользуйтесь тем же способом, только не забудьте сменить названия переменных.

Если вам нужно расположить несколько маркеров очень близко друг к другу, воспользуйтесь z-индексом. Маркер с самым высоким значением z-индекса будут всегда сверху:

Параметр z-index позволяет вам выбрать какой маркер будет поверх всех

var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
icon: companyImage,
shadow: companyShadow,
title:"Høgenhaug",
zIndex: 4
});

Добавляем информационные блоки

Вы можете ввести описание компании с помощью информационного блока, появляющегося при нажатии на логотип. Благодаря Google Maps API это сделать проще простого.

Щелчок на логотип вашей компании будет активизировать информационный блок.

Вставьте данный код сразу под переменной map:

var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
'<div id="bodyContent">'+
'<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat.</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({ content: contentString });

И этот код тоже необыкновенно прост. Вот здесь есть простор для ваших идей, так как в информационном блоке можно расположить не только название и пару тройку параграфов, но и изображения. А чтобы описание появлялось по щелчку на логотип, впишите этот код сразу после закрывающей }функции initialize():

google.maps.event.addListener(companyMarker, 'click', function() {
infowindow.open(map,companyMarker);
});

Приукрасьте немного ваш блок, добавив стилей в ваш stylesheet-файл:

body {
font-family: Helvetica, Arial, sans-serif;
font-size:10pt;
}

Вот и все! Теперь вы сможете встроить Google карту в любой проект.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.stiern.com
Перевел: Максим Шкурупий
Урок создан: 28 Октября 2009
Просмотров: 89073
Правила перепечатки


5 последних уроков рубрики "Разное"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 28 Октября 2009 17:39
    coban
    дававыйте урок где будет показываться какой робот находится на сайте
  • 28 Октября 2009 17:40
    coban
    а такие карты щас не нужны если интернет слабый надоест пользователю грузить их
  • 28 Октября 2009 17:55
    Сергей_Патин
    Вы еще скажите, что графика на сайтах не нужна, скрипты и флэш, потому что пользователю надоест грузить их. А нужны только текстовые сайты.
  • 28 Октября 2009 19:24
    ЕвгенийСтыценков
    coban, Что значит слабый интрнет? Интернет с каждым месяцем дешевеет. В моем мааааленьком городке мой провайдер уже дважды скорость повышал при той же абонплате (с 512 дл 1500), gprs-internet 512 у нас около 600 р стоит.
  • 29 Октября 2009 02:28
    sergiudigore
    molto bellо
  • 29 Октября 2009 22:05
    Ruseller
    По-моему такое уже когда-то было
  • 30 Октября 2009 07:35
    Кальяныч
    Урок канешна хороший! Но рекламироввать google нахаляву чтот не хочется!
  • 30 Октября 2009 14:58
    МаксимШкурупий
    Кальяныч, гугл в рекламе на Вашем сайте не нуждается))
  • 30 Октября 2009 16:16
    Кальяныч
    МаксимШкурупий это точно))) но всё таки...........
  • 1 Ноября 2009 15:49
    asim
    А можно поподробнее описать получения координат
  • 9 Ноября 2009 11:40
    Ahisandra
    Замечательный урок! Спасибо)
  • 19 Ноября 2009 10:04
    Nyukers
    мне хватило двух строк кода, пример здесь (внизу страницы) http://nyuk.narod.ru/nyuk.html
  • 30 Ноября 2009 14:07
    Castiel
    Доброго времени суток, урок мне понравился и я его реализовал. Но у меня к Вам вопрос - как на карте отметить путь?
  • 29 Марта 2010 18:58
    ventilv
    Здравствуйте. Есть проблемка с отображением карты в Opera - вместо карты - пустое мето. В IE отображается нормально. сайт размещен на бесплатном хостинге ho.ua. на локальном сервере нормально отображается как в опере так и в IE. Подскажите плиз в чем может быть проблема? спс
  • 24 Апреля 2010 03:22
    jackkuk
    Здравствуйте. Подскажите, как правильно вводить адрес места в URL ?
  • 19 Июля 2010 11:52
    Kolyanova
    Доброго Дня! Вопрос - весь инет изрыл - но не нашел - как при наведении на меркер - менять ему иконку, и при mouseout - прежнюю иконку... желательно в рабочем примере...или мне на мыло..Заранее ОЧЕНЬ благодарен...
  • 2 Сентября 2010 16:17
    ash_wise
    Спс... хорошенький урок...
  • 21 Декабря 2010 15:40
    ruslan_eset
    Спасибо за урок. Не могли бы еще рассказать, как ставить много меток, используя массивы? То есть если в одном городе надо показать несколько мест одновременно.
  • 17 Апреля 2011 18:28
    stalker828
    Суппер! большое спасибо!
  • 6 Июня 2011 07:19
    NabranRu
    Статейка отличная, только вот Вы не ответили на этот вопрос (в одном городе надо показать несколько мест одновременно.) Который меня тоже очень заинтересовала. Я сделал пару мест вот тут на пробной странице http://foto.nabran.ru/index/karta/0-7 Только вот одна из кнопок кликабельная а вторая нет, то есть когда на вторую метку нажимаю информационная окошка не выскакивает. Может быть поможете все таки нам. Был бы очень благодарен.
  • 6 Июня 2011 07:57
    NabranRu
    Все уже разобрался, теперь могу сколько угодно меток поставить на страницу. Если чо кому нужно помощь не стесняйтесь обращайтесь. Всем удачи.
    • 15 Декабря 2011 18:45
      Goraccio
      привет, а у меня при запуске HTML все работает, но после вставки кода в сайт - карта отображается, но маркеры нет, подскажите в чем может быть причина? ведь путь к картинкам должен быть указан верно... может ты знаешь в чем дело?
  • 28 Июля 2011 15:40
    Vanchik19
    Круто ! Ток как сделать 3 карты ?
  • 12 Сентября 2011 21:52
    vizavi
    Можно ли вставлять карты гугл в каждый пост? Если да, то где прописывать координаты, т.к. в каждом посте должны быть свои координаты? И будет ли такое кол-во карт на блоге отрицательно влиять на позицию в выдаче, на продвижение?
  • 12 Сентября 2011 21:53
    vizavi
    Как определить точные координаты, например, Парижа?
  • 14 Декабря 2011 17:13
    Goraccio
    при запуске HTML все работает, но после вставки кода в сайт - карта отображается, но маркеры нет, подскажите в чем может быть причина? ведь путь к картинкам должен быть указан верно...
  • 28 Декабря 2011 12:05
    echolotus
    Хороший урок. Вот бы еще также просто было обьяснено как встроить на свой сайт сервис расчета расстояний с помощью api google. Пользователь вводит начальный и конечный город и ему показывается карта с проложенным маршрутом и выводится информации о расстоянии между этими городами...
  • 30 Апреля 2013 22:58
    ABrej
    Google не всегда удобен. Вот если бы взять свою карту и выложить на свой сайт аля google maps было бы здорово! Но КАК?
  • 7 Октября 2013 11:57
    MihailXxx
    Здравствуйте. А как можно использовать две карты? Одну получилось с логотипом. А если надо вывести две под два адреса?
  • 3 Сентября 2014 11:53
    paulg2
    не могу понять, как добавить второе описание к другому значку и так далее
  • 14 Сентября 2015 14:56
    dimalepel
    День добрый. Воспользовался Вашим уроком. Все работает. Подскажите, какой прописать код, что бы сделать карту черно-белой? Спасибо.
  • 13 Февраля 2016 18:47
    Tanatar
    Спасибо за урок
  • 29 Апреля 2016 13:48
    Penetrator
    Как сделать карту для Центрального управления компании Apple в Купертино - понятно, а вот как сделать для адреса посложнее - непонятно. Отсюда и весь дальнейший урок не имеет смысла.
  • 22 Августа 2016 14:27
    NatNikVor
    Урок прекрасный, но вообщем-то на сегодняшний день достаточно известный. А вот у меня "больной" вопрос, на который нигде не могу найти ответ - как задать на спутниковой карте Google Maps стереографическую проекцию (или как-то еще?), чтобы отобразить район Северного Полюса?
^ Наверх ^