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