I have this working map https://jsfiddle.net/m9ugbc7h/4/ then i tryed to integrate multiple markers with info windows following step by step this tutorial http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/ so now i got this new version of the map https://jsfiddle.net/m9ugbc7h/5/ but it doesn't work
Here the description how i think the added code works
This is the text for two info windows in order
var infoWindowContent = [
['<div class="info_content">' +
'<h3>Ventura</h3>' +
'<p>Ventura P</p>' +
'</div>'],
['<div class="info_content">' +
'<h3>Selvatica</h3>' +
'<p>Selvatica p</p>' +
'</div>']
];
This adds a number to every marker listed before
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
And this one asigns text 1 to marker 1, text 2 to marker 2, etc.
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
You have few issues with the code:
First
Console error google is not defined caused by:
var bounds = new google.maps.LatLngBounds();
at the top of the file before google js is loaded. Move it inside jQuery(document).ready(function($){:
jQuery(document).ready(function($){
bounds = new google.maps.LatLngBounds();
Second
// Loop through our array of markers & place each one on the map
Why? They are already placed on the map, you just want to attach them InfoWindow:
//marker = new google.maps.Marker({
// position: position,
// map: map,
// title: markers[i][0]
//});
var marker = markers[i];
In the above code is the root of your problem (info windows not showing up): you are creating new Marker object instead of using the existing one from the markers array.
Third
Console error: too much recursion
caused by:
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
The issue with this one is most probably that bounds are undefined at this moment. Not sure why, but too much recursion is usualy caused by that. I have commented that out, so you will have to take a look how to pass valid value in fitBounds.
Fourth
You have sintax error here:
var infoWindow = new google.maps.InfoWindow(), marker, i;
You probably meant:
var infoWindow = new google.maps.InfoWindow();
Working fiddle: https://jsfiddle.net/m9ugbc7h/7/
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);
});
});
I'm new to this google-maps and javascript, I have go through these examples.But I still no idea how to apply it into my codes, It doesn't works.Hope someone can help me.Thank you.
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
// A function to create the marker and set up the event window
function createMarker(point,name,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
GEvent.trigger(gmarkers[i], "click");
}
// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 43.907787,-79.359741), 8);
// add the points
var point = new GLatLng(43.65654,-79.90138);
var marker = createMarker(point,"This place","Some stuff to display in the<br>First Info Window")
map.addOverlay(marker);
var point = new GLatLng(43.91892,-78.89231);
var marker = createMarker(point,"That place","Some stuff to display in the<br>Second Info Window")
map.addOverlay(marker);
var point = new GLatLng(43.82589,-78.89231);
var marker = createMarker(point,"The other place","Some stuff to display in the<br>Third Info Window")
map.addOverlay(marker);
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
}
The sidebar is made next to the google-maps.Hope someone can take a look on my code.
The documentation you got there is pretty good actually.
Let me know to simplify it a bit more.
So to get clusterer going you'll need the following bits and pieces.
Your project will have to import the markerclusterer.js file.
You need an array of markers.
You need to instantiate the MarkerClusterer object.
That is all, straight forward.
1: Instantiation of markers
I can see from the code you have already done it.
var marker = new google.maps.Marker(
{
position: myLatLng,
map: map,
title: '1111'
});
2: Building an array of markers
Nothing much here. Basically you declare an [] object and push the markers into it.
var markers = [ marker, marker2, marker3 ];
3: Instantiate the MarkerClusterer object
I guess the only challenging part is this one. As mentioned before, you'll new to import the markerclusterer.js file.
Build an object to hold whatever configuration that is needed for the MarkerClusterer object and instantiate it.
markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m',
gridSize: 10,
minimumClusterSize: 2
});
Here is an example;
Clusterer
I'm having a google map where google markers are put up. The placement of markers works well. But if I click a marker, the adress should open up in an infowindow. The adress, longtitude and latitude are loaded from model.js into the variable myLocations.
EDIT: Currently a click on any marker returns the adress of the last object in myLocations. But I would like to get the myLocations.adress of the one who was clicked.
var markerspots;
var spot;
var j;
for (j = 0; j < myLocations.length; j++){
spot = {
lat: parseFloat(myLocations[j].lati),
lng: parseFloat(myLocations[j].long)
};
contentString = myLocations[j].adress;
markerspots = new google.maps.Marker({
position: spot,
map: map,
icon: markerspot,
content: contentString,
id: j
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(markerspots, "click", (function(marker) {
return function(evt) {
infowindow.setContent(contentString);
infowindow.open(map, markerspots);
}
})(markerspots));
}
I have found lots of solutions, but I don't understand any of those. So how can I make the content of the clicked marker show up in an infowindow?
Thanks
Well you are accessing your contentString, which is set to the last one you created in your for loop.
What you really want is the content property of the marker you clicked on, which is stored in this.
So
google.maps.event.addListener(markerspots, 'click', function() {
console.log(this.content);
});
should do the trick.
Example here: https://jsfiddle.net/4tpnh00u/
...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 pretty new to JavaScript and the google maps API. I cannot figure out what is wrong.
The InfoWindow is actually a class I found "InfoBubble".
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/
Here is the situation:
1. I create my map and add a 'click' event. The event creates Markers.
2. I create one global infoWindow.
3. I click the map, a Marker appears.
4. I click the map, a Marker appears.
5. I click the map, a Marker appears. Step 3-5 can be repeated lots and lots.
6. I click marker number X
6.1. An infoWindow pops up.
7. I click marker number Y
7.1. The infoWindow is closed. (.close())
7.2. Its content and position is changed
7.3. It is opened on the new position (.open(map,marker))
7.4. Also Marker number X is removed.
Try it yourself: http://dl.dropbox.com/u/6084360/test/index.html
Why is step 7.4. happening? After it has happened I can click markers however I feel like without anything disappearing. WHY?
I have tried debugging somewhat via Google Chrome but after I do step 7.3 it takes me into some minified code and I get lost.
Here is the line which removes the marker. I have no idea why it removes it or how to know where to start.
R.addDomListenerOnce=function(a,b,c,d){var e=R[yc](a,b,function(){e[wb]();return c[Cc](this,arguments)},d);return e};R.R=function(a,b,c,d){c=cf(c,d);return R[yc](a,b,c)};function cf(a,b){return function(c){return b[oc](a,c,this)}}R.bind=function(a,b,c,d){return R[G](a,b,P(c,d))};R.addListenerOnce=function(a,b,c){var d=R[G](a,b,function(){d[wb]();return c[Cc](this,arguments)});return d};R.forward=function(a,b,c){return R[G](a,b,df(b,c))};R.ua=function(a,b,c,d){return R[yc](a,b,df(b,c,!d))};
My code:
var times = 0;
var treasureLocation = new google.maps.LatLng(62.05350309096103, 15.373047874999997);
var map, infoBubble = null;
function initialize()
{
// Create the actual map.
map = new google.maps.Map(document.getElementById("map_canvas"),
{
zoom: 4,
center: new google.maps.LatLng(62.05350309096103, 15.373047874999997),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
infoBubble = new InfoBubble({
disableAutoPan: true
});
// Add an eventlistener to the map.
google.maps.event.addListener
(
map,
'click',
function(ev)
{
addMarker(ev);
}
);
}
function addMarker(ev)
{
// Get the distance.
var distance = getDistance( ev.latLng , treasureLocation );
// Skriv ut vart man klickade.
document.getElementById("click_info").innerHTML = "Du klickade " + distance + " ifrån skatten, försök igen!";
// Create a marker
var marker = new google.maps.Marker({
position: ev.latLng,
map: map,
clickable: true,
title: "Härifån är det bara " + distance + " till skatten!",
icon: "shovel.png"
});
// Hook the click on the created marker to show the created popup
google.maps.event.addListener
(
marker,
'click',
function(ev)
{
if( infoBubble != null ){infoBubble.close();}
infoBubble.setContent(marker.title);
infoBubble.setPosition(marker.position);
infoBubble.open(map, marker);
}
);
}
I can't really explain why but seems like infoBubble.setPosition(marker.position); is causing trouble. Just Delete it. You are using infoBubble.open(map, marker); to define bubble position, so you don't rly need it.