I know this question was asked more often. But for my code, unfortunately, none of the answers work for me. I have the following Google Maps code and would like to set my own google maps marker icon.
For this I have tried the following code. Unfortunately without success.
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?
key=key"></script>
<div id="map_canvas"></div>
<script>
var locations = [
['title',51.0, 11.0, 'https://www.domain.de/, 4],
['title',51.0, 11.0, 'https://www.domain.de/, 4],
['title',51.0, 11.0, 'https://www.domain.de/, 4],
['title',51.0, 11.0, 'https://www.domain.de/, 4],
['title',51.0, 11.0, 'https://www.domain.de/, 4],
['title',51.0, 11.0, 'https://www.domain.de/, 4]
];
var map;
var markers = [];
function init(){
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: new google.maps.LatLng(51.5151, 10.4545),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles:
[
]
});
function setMarkers(map) {
var image = {
url: 'marker-path/marker.jpg',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 32)
};
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {
markers[i] = new google.maps.Marker({
position: {lat:locations[i][1], lng:locations[i][2]},
map: map,
icon: image,
html: locations[i][0],
id: i,
});
google.maps.event.addListener(markers[i], 'click', function(){
var infowindow = new google.maps.InfoWindow({
id: this.id,
content:this.html,
position:this.getPosition()
});
google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
markers[this.id].setVisible(true);
});
this.setVisible(false);
infowindow.open(map);
});
}
}}
init();
</script>
Unfortunately, no marker is displayed. Where is the problem?
First of all, make sure that (1) the path to your image is correct, and (2) your image's size is in fact 20 x 32 (otherwise change Size accordingly).
Your code snippet has lots of issues, and I have amended it as follows to be able to reproduce it from my side:
<script>
var locations = [
['title', 41.38879, 2.15899, 'https://www.domain.de/', 4],
['title', 48.85341, 2.3488, 'https://www.domain.de/', 4],
['title', 52.52437, 13.41053, 'https://www.domain.de/', 4]
];
var map;
var markers = [];
function init() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 5,
center: new google.maps.LatLng(51.5151, 10.4545),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: []
});
setMarkers(map);
}
function setMarkers(map) {
var image = {
url: 'maker-path/maker.jpg',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 32)
};
var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {
markers[i] = new google.maps.Marker({
position: { lat: locations[i][1], lng: locations[i][2] },
map: map,
icon: image,
html: locations[i][0],
id: i
});
google.maps.event.addListener(markers[i], 'click', function() {
var infowindow = new google.maps.InfoWindow({
id: this.id,
content: this.html,
position: this.getPosition()
});
google.maps.event.addListenerOnce(infowindow, 'closeclick', function() {
markers[this.id].setVisible(true);
});
this.setVisible(false);
infowindow.open(map);
});
}
}
</script>
You can also test this first by replacing "maker-path/maker.jpg" with eg https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png .
You'll see how the icon from Google's documentation is indeed displayed.
If your own icon is not, then that means that you need to double check pointers (1) and/or (2) I stated above.
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.