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;
});
})
Related
I have multiple markers and currently when more than one infoWindow is clicked, the other already-opened infoWindows stay open, cluttering the map. I would prefer it if I could simply reuse a single infoWindow, move it and update it's content. This is what I am attempting to do below:
var info = new SnazzyInfoWindow ();
/*
* Loop through each item in the 'features' array, including info windows, and display the marker
*/
features.forEach(function (feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
var infoContent = feature.contentImage + feature.content;
marker.addListener('click', function() {
infoCallback(infoContent, marker);
});
});
function infoCallback(infoContent, marker) {
return function() {
info.close();
info.setContent(infoContent)
info.open(map, marker);
};
};
However I am receiving the error Cannot read property 'placement' of undefined and can't seem to figure out what's wrong here.
Note that I am using the "Snazzy Info Window" plugin, but I think the same would apply to the stock infoWindow.
Yes. Inside the onClick function, when marker.addListener('click' is being executed, you don't have feature/marker. The variables are not what they were when the foreach was executed.
One trick I mostly use, is to make an array of the marker objects. Inside the onClick you search for the 'this' marker inside the array.
Something like this:
var markers = []; // store the markers in this array
features.forEach(function (feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
markers.push(marker);
marker.addListener('click', function() {
// first find out which marker was clicked on
var index = markers.indexOf(this); // this represents the marker that was clicked on
// index should be the same index as the index for features.
var feature = features[index];
var marker = markers[index];
var infoContent = feature.contentImage + feature.content;
// now we can call infoCallback.
infoCallback(infoContent, marker);
});
});
My google marker link refuses to function. i click it will not open the link.
// Let's also add a marker while we're at it
var image = 'images/icons/mapicon.png';
var beachMarker = new google.maps.Marker({
position: new google.maps.LatLng(39.419659, -77.4126419),
map: map,
icon: image,
url: 'https://www.google.com'
});
google.maps.event.addListener(marker, 'click', function() {
window.open(marker.url);
});
Your addListener is pointing to marker variable, but your marker is defined as beachMarker.
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';
});
...depending on where I put the line
var mc = new markerclusterer(map);
If it goes where the examples seem to suggest - right after "var map" is introduced - all the markers disappear (example running here).
A version without the mc variable runs with all markers visible.
When the mc variable is introduced after the google.maps.event.addListener function as shown here, it seems also to cancel its effect and markers are shown.
The locations variable is an array containing geolocation data and ready-formatted HTML (produced in a spreadsheet) for all points on the map, which is passed to the markers to place them.
I think the issue may be that to be used with the markerclusterer the array is referring to the geolocation data, when it should refer to markers? I've seen other people using a variable markerarray, but I'm worried if I mess with it I'll break the html and geolocation extraction part of the code.
Can anyone help explain why var mc is failing? I've loaded http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js in the header, so it should work and I can't see any syntax errors in my code.
This is the first thing I've made with JS and it's great but I just want to finish it off with the marker clusters now ! Help would be much appreciated.
EDIT: I also tried playing with this but like I say the array here is two-fold to my understanding, so I couldn't get it to work:
The suggestion:
...
var infowindow = new google.maps.InfoWindow();
var marker, i;
map.markers = []; // ADD THIS LINE
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
});
map.markers.push(marker); // ADD THIS LINE
...
Snippet of my code:
...
var infowindow = new google.maps.InfoWindow();
var marker, i;
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
});
...
You have 2 problems.
you never add your markers to the MarkerClusterer
var markers=[];
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker);
}
var mc = new MarkerClusterer(map, markers);
markerclusterer has the incorrect case (javascript is case sensitive), it should be MarkerClusterer.
working example
markerclusterer is not the correct casing.
the object is "MarkerClusterer"
JavaScript is case sensitive!
The samples also look slightly different then your code:
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style]
});
for example
I am pulling my latlng object from a database and when I loop through the query in the javascript the markers all populate just fine, but when ever I click on one they all open the same infoWindow object on a different marker. I assume this is some sort of naming issue, but I am having trouble finding out why because it all looks right to me. the following code is in a cfoutput tag creating the loop.
var latlng_#get_latlng.recordcount# = new google.maps.LatLng(#get_latlng.mlat#,#get_latlng.mlong#);
var marker_#get_latlng.recordcount# = new google.maps.Marker({
position: latlng_#get_latlng.recordcount#,
map: map,
title: "test"
});
var contentString_#get_latlng.recordcount# = "test" + #get_latlng.recordcount#;
var infowindow_#get_latlng.recordcount# = new google.maps.InfoWindow({
content: contentString_#get_latlng.recordcount#
});
google.maps.event.addListener(marker_#get_latlng.recordcount#, 'click', function() {
infowindow_#get_latlng.recordcount#.open(map,marker_#get_latlng.recordcount#);
});
Rather than producing so much redundant JS, I'd create a function that adds the markers.
function addMarker(lat, lng, title, content) {
var latlng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title
});
var infowindow = new google.maps.InfoWindow({ content: content });
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
}
Then in your loop:
addMarker(#get_latlng.mlat#,#get_latlng.mlong#,"#get_latlng.title#","#get_latlng.content#");
Doesn't 'recordcount' return the number of values in your result set? In which case, all your variable names will be the same. Therefore they will all be rendered correctly, but will continually overwrite the JavaScript variable reference: and will all create an infoWindow based on the last one you did.
You need a more unique name: I presume you wanted an index based on the resultset index, but a simple count would be fine.