Делаем карту Google Map "как к нам добраться" на вашем сайте

Делаем карту Google Map «как к нам добраться» на вашем сайте

На чтение 2 мин Просмотров 67 Опубликовано 22.11.2012 Обновлено 30.01.2023

Часто становиться необходимо добавить на сайт карту с месторасположением вашего офиса или какого либо объекта.
При помощи API Google Maps очень легко можно это осуществить.
Делаеться это путём вставки простого html / JavaScript кода на страницу.

Итак. В head страници необходимо добавить такой код:

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="https://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<title>Пример Google Maps JavaScript API v3: простая карта</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=ru">

Эта часть стандартна. Да и описывать там нечего..
В тот же самый head теперь добавим скрипт настраивающий карту:

<script  type="text/javascript"> 
                function initialize() {

                  var myLatlng =  new google.maps.LatLng(50.003498, 36.23785); // координаты
                  var mapOptions = {
                    zoom: 8, // масштаб
                    center: myLatlng
                  };
                  var map = new google.maps.Map(document.getElementById('map-canvas'),
                      mapOptions);

                  var marker = new google.maps.Marker({ // маркер на карте
                          position: myLatlng,
                          map: map,
                          title:"Hello World!"
                  });

                  marker.setMap(map);
                }

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

Последний этап: (закрываем head и добавляем блок для карты)

</head>
<body onload="init()">
  <div id="map_canvas"></div>
</body>

О том как узнать координаты

Идём на сайт maps.google.com
Находим на карте необходимый объект.
Смотрим title страници.
Два числа — широта и долгота необходимого объекта т.е. координаты.
Демонстрация.

PS. Также есть огромное количество сервисов для поиска координат на google maps.