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

Мало разместить карту на сайте. Хочется еще и обеспечить некоторую ее интерактивность. Сегодня расскажу, как добавлять маркеры и открывать окна при щелчке на них.

Поиск координат


Чтобы вывести маркер в нужное нам места, необходимо знать его координаты. Открываете Google Maps и на карте находим место, куда будет выставлен маркер. Например, музей космонавтики Екатеринбурга.

Если вы знаете адрес, то легче всего найти нужную точку, указав адрес в строке поиска. Появится маркер на искомом адресе. Наведите на него указатель мыши и нажмите правую кнопку.

Выберите «Что здесь».

Вот эти координаты скопируйте в буфер обмена. Теперь перейдите на свой сайт, где мы создали карту и откройте HTML-код. После размещения кода вставьте скрипт маркера.
var position = new google.maps.LatLng(56.837852, 60.619150);
			var marker = new google.maps.Marker({
					position: position,
					map: map,
					title:"Музей космонавтики"
				});
У самой карты измените масштаб (zoom) на значение 17 и координаты на выбранные. В итоге вы получите следующий код:
<style>
  #map{
    width:800px;
    height:400px;
  }
</style>
<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJ5Y5umIx7pg-2g5KSHRLnkmEiIueXE6o">
    </script>
<script>
  window.onload=function(){

    var mapOptions = {
               center:new google.maps.LatLng(56.837852, 60.619150) ,
               zoom:17,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }
            var map = new google.maps.Map(document.getElementById("map") ,mapOptions);
    		var position = new google.maps.LatLng(56.837852, 60.619150);
			var marker = new google.maps.Marker({
					position: position,
					map: map,
					title:"Музей космонавтики"
				});
         }
</script>
<div id="map"></div>
Мы указали позицию маркера, место, куда его размещать (map) и подсказку, которая будет выводиться при наведении на него указателем мыши.

Создание собственного маркера с тенью


Иногда хочется удивить посетителя чем-то необычным. С этой целью создадим собственный маркер и добавим к нему тень. Нарисовать лучше всего в фотошопе, но можно найти и готовые иконки.
Закачайте рисунки в свой проект. Для этого нажмите кнопку в правой панели и выберите команду «Загрузить».

Выберите нужные рисунки и узнайте путь к ним. Для этого нажмите на любом правую кнопку мыши и выберите “Копировать URL картинки».

Вы получите в буфере обмена строку с таким адресом:
/images/images4659/mini/1.png
Вам надо убрать из него «mini» — это ссылка на уменьшенную копию рисунка. И останется адрес изображения. Сейчас мы им воспользуемся.
Добавьте вместо предыдущего кода вставки маркера новый:
var map = new google.maps.Map(document.getElementById("map") ,mapOptions);
    		var position = new google.maps.LatLng(56.837852, 60.619150);
			var marker = new google.maps.Marker({
					position: position,
					map: map,
              		icon:'/images/images4659/1.png',
        			title:"Музей космонавтики"
				});
В итоге вы увидите на карте собственное изображение вместо стандартного. Только учтите, что рисунок должен иметь прозрачный фон.

Добавление окна с сообщением


При щелчке на маркер у нас будет появляться информационное окошко. Для этого используется объект infoWindow. Добавьте перед маркером следующий код:
str="История музея космонавтики"
var info = new google.maps.InfoWindow({
    content: str
  });
А перед закрытие функции загрузки вызов этого окна.
marker.addListener('click', function() {
    info.open(map, marker);
  });
Метод addListener позволяет добавить событие к любому объекту кода. По нажатию на маркер вызывается функция, которая открывает окно. Полный код выглядит следующим образом:
<style>
  #map{
    width:800px;
    height:400px;
  }
 </style>
<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJ5Y5umIx7pg-2g5KSHRLnkmEiIueXE6o">
    </script>
<script>
  window.onload=function(){

    var mapOptions = {
               center:new google.maps.LatLng(56.837852, 60.619150) ,
               zoom:17,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }
            var map = new google.maps.Map(document.getElementById("map") ,mapOptions);
   
str="История музея космонавтики"
			var info = new google.maps.InfoWindow({
    content: str
  });
var position = new google.maps.LatLng(56.837852, 60.619150);
  var marker = new google.maps.Marker({
    position: position,
    map: map,
    title: Музей космонавтики'
  });
  marker.addListener('click', function() {
    info.open(map, marker);
  });
         }
</script>
<div id="map"></div>
И результат нажатия показан ниже.
21 августа 2017, 13:45    Ivan Web-дизайн 0    2 0
    Загруженные файлы:
  • 1.png 1.13 kb
  • 8.png 104.22 kb

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.