I try to change the color of part of the title, but look like the title option does not take html format. How can I make it work?
Thank you
var testtitle = '<font color="green">This is some text!</font> another text';
var marker = new google.maps.Marker({
position: location,
title: testtitle,
map: map
});
you must use InfoWindow object
see this doc google map api
var infowindow = new google.maps.InfoWindow({
content: "<span>any html goes here</span>"
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
A "title" is a tooltip that is automatically created for the google.maps.Marker object. It doesn't support HTML markup. If you want to create one that is different from the default, you can, but it would be custom.
See this post for one custom tool tip option (a google search found 2 posts describing them).
Related
I set up a map with multiple markers using Google Maps Javascript API. If a marker is clicked, an infowindow opens. However, while the content is correct (different for each marker), the infowindow opens above one and the same marker, no matter which one is clicked.
To fix this, I tried to explicitly set the correct position (long/lat) in the eventlistener function. According to console log output, the values for long and lat are correct. But the infowindows still opens at the wrong, identical position.
Here is the code; placeMarker is called from within a loop through all locations:
var activeInfoWindow;
function placeMarker(map, lat, lng, markerurl, title, contentString) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
icon: markerurl,
map: map,
title: title,
});
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
// close other active infowindows
if (activeInfoWindow) {
activeInfoWindow.set("marker", null);
activeInfoWindow.close();
}
// added to explicitly set new position:
infowindow.setPosition(new google.maps.LatLng(lat, lng));
// check: console log shows on click: lat and long correct (different for each clicked marker)
console.log(lat+' '+lng+' '+title);
infowindow.open(map, marker);
activeInfoWindow = infowindow;
});
}
Any idea what I am missing?
Thanks!
Solved. Simply needed to add "var" before "marker":
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
icon: markerurl,
map: map,
title: title,
});
I really cant understand javascript, i know it should be a very easy question but i stucked..
I have a google map with multiple markers and i added every marker and work perfect but i wanted to give them links. My locations array is like;
['http://website.com',36.598900,35.202094,'1']
i use [1] and [2] as lat long but i wanted to use [0] as link. My loop works perfect but every marker's link going to last item's link
Here is my loop
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: image,
url: locations[i][0],
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
}
Where did i make the mistake?
1/ You need to add var before marker = new google.maps.Marker({ ,
Because , you use now marker as Global variable which is overridden for each iteration.
2/ Anyway, best practices are to save all markers as object attributes . Let's call this Object: mk , then your markers will be mk.marker0,mk.marker1,...so on.
var mk={}; // this is nameSpace to save all markers
locations.map((loc,i)=>{
mk['marker'+i] = new google.maps.Marker({
position: new google.maps.LatLng(loc[1], loc[2]),
map: map,
icon: image,
url: loc[0],
});
return mk['marker'+i];
}).forEach((marker)=>{
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
})
I'm trying to make a custom marker that is an image. However, whenever I add "icon: image;" to my code, the map no longer shows up. Where did I go wrong?
var image = 'assets/marker.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.6700, -73.9400),
map: map,
icon: image;
});
Remove semi-column which is after "icon:image".
I've got an issue, I can't make the marker clickable for my project. I've tried with google.com but nothing works. Can some one help me ?
var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
<!--Add markers to map using previously specified locations-->
var marker = new google.maps.Marker({
position: myLatlng,
url:'http://www.google.com',
title: 'Tobermory Distillery',
map: map,
});
Thanks
you can bind onclick to markers like this:
google.maps.event.addListener(marker, 'click', function() {
location.href = 'http://www.google.com';
});
Say I have this piece of code:
var marker = new google.maps.Marker({
position: location,
title: 'Búfals',
map: map
});
This creates a marker as expected but if I hover the mouse over it I don’t see 'Búfals'
as I would expect (instead I see the html code).
This doesn't make any difference:
var marker = new google.maps.Marker({
position: location,
title: unescape('Búfals'),
map: map
});
Any ideas?
Thanks.
This may be an overkill but it works:
function decode(txt){
var sp = document.createElement('span');
sp.innerHTML = txt;
return sp.innerHTML;
}
decode('Búfals')
Similar to what Daniel suggested, you could try using the unicode value for the character you're trying to display, in your case it would be \u09fa.
You may want to use:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: unescape('B%FAfals')
});