How to change the image of a specific marker in google maps?

P

polo7772020-03-03 12:28:55

JavaScript

polo777, 2020-03-03 12:28:55

Guys, there is a code, help a certain marker put its own marker, thanks to everyone who helps

<!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>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexander Cheremkhin, 2020-03-03
@Che603000

// моя иконка
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   // ставим свою иконку
            });

dos https://developers.google.com/maps/documentation/j...