Карты Google - Маркеры

Мы можем рисовать объекты на карте и привязывать их к желаемой широте и долготе. Это так называемые накладки. Карты Google предоставляют различные наложения, как показано ниже.

Markers
Polylines
Polygons
Круг и прямоугольник
Информационное окно
Symbols

Чтобы отметить одно место на карте, Google Maps предоставляет markers. Эти маркеры используют стандартный символ, и эти символы можно настроить. В этой главе объясняется, как добавлять маркеры, а также настраивать, анимировать и удалять их.

Добавление простого маркера

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

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(19.373341, 78.662109),
   map: map,
});

пример

Следующий код устанавливает маркер на город Хайдарабад (Индия).

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:7
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.088291, 78.442383),
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Он производит следующий вывод -

Анимация маркера

После добавления маркера на карту вы можете пойти дальше и добавить к нему анимацию, например bounce и drop. В следующем фрагменте кода показано, как добавить к маркеру анимацию отскока и падения.

//To make the marker bounce`
animation:google.maps.Animation.BOUNCE 

//To make the marker drop
animation:google.maps.Animation.Drop

пример

Следующий код устанавливает маркер на городе Хайдарабад с добавленным эффектом анимации -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.377631, 78.478603),
               zoom:5
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
         }
      </script>

   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Он производит следующий вывод -

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

Вы можете использовать свои собственные значки вместо значка по умолчанию, предоставляемого Google Maps. Просто установите значок какicon:'ICON PATH'. И вы можете сделать этот значок перетаскиваемым, установивdraggable:true.

пример

В следующем примере показано, как настроить маркер на желаемый значок -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
				
            marker.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Он производит следующий вывод -

Удаление маркера

Вы можете удалить существующий маркер, установив для него нулевое значение с помощью marker.setMap() метод.

пример

В следующем примере показано, как удалить маркер с карты -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
				
            marker.setMap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Он производит следующий вывод -