Задать вопрос
@polo777
javascript

Как изменить картинку определённого маркера в гугл мапс?

Ребята, есть код, помогите определённому маркеру поставить свой маркер, спасибо всем кто поможет
<!DOCTYPE html>
<html>
  <head>
    <title>Custom Markers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
      <style>
body{
  margin:0;
}
#map{
  width: 100%;
  height:400px;
}
    </style>
  
  </head>
  <body>
<div id="map"></div>

<script src="https://maps.google.com/maps/api/js?key=AIzaSyAA58o0KC7WSYt0SL9MdIpG5TgyszMHZgw&callback"></script>
 <script>
 google.maps.event.addDomListener(window, 'load', init);
    var locations = [
        ['Rīga', 50.31911, 30.29728, 'Salnas iela 1a'],
		['Tukums', 50.233871, 30.293275, 'Raudas iela 30a'],
        ['Tukums', 50.333871, 30.283275, 'Raudas iela 30a']
	
    ];

    function init() {

        var myOptions = {
            center: new google.maps.LatLng(50.322779, 30.301986),
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP

        };
        var map = new google.maps.Map(document.getElementById("map"),
            myOptions);

        setMarkers(map, locations)
    }


    function setMarkers(map, locations) {

        var marker, i, mark_position;
        for (i = 0; i < locations.length; i++) {

            var title = locations[i][0];
            var lat = locations[i][1];
            var long = locations[i][2];
            var text = locations[i][3];

            mark_position = new google.maps.LatLng(lat, long);

             marker = new google.maps.Marker({
                 map: map,
                 title: title,
                 position: mark_position,
                 animation: google.maps.Animation.DROP,
                 icon: ''
            });

            var content = '<div class="info-block"><h3>' + title + '</h3><b>' + "Address: </b>" + text + '</div>';
            var infowindow = new google.maps.InfoWindow();

            google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
                return function() {
                    infowindow.setContent(content);
                    infowindow.open(map,marker);
                };
            })(marker,content,infowindow));
        }
    }
	  </script>

  </body>
</html>
  • Вопрос задан
  • 170 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Che603000
c 2011 javascript 
// моя иконка
const image = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32)
  };

marker = new google.maps.Marker({
                 map: map,
                 title: title,
                 position: mark_position,
                 animation: google.maps.Animation.DROP,
                 icon:  image   // ставим свою иконку
            });


дос https://developers.google.com/maps/documentation/j...
Ответ написан
5 комментариев
5 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Исправить ошибку чтения изображения OpenCV
29 нояб. 2024, в 03:50
1000 руб./за проект
Разметчик данных (аннотатор, асессор ML-датасетов) на ГПХ
29 нояб. 2024, в 02:30
60000 руб./за проект
Сценарии для REELS в крупном проекте
29 нояб. 2024, в 02:28
100000 руб./за проект
Ещё заказы