Clustering markers with infowindow in googlemaps v3 api

Clustering markers with infowindow in googlemaps v3 api - javascript

I cant get the ClustererMarker to work. I want markers to cluster when they are close to each other and I have found:
var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, markers, mcOptions);
But I cant get them to work with my code, either all markers disappear or only one is visible (not in the correct way). I hope someone can help me with my problem.
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, 'mouseover', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}

var gmarkers = [];
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, 'mouseover', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
gmarkers.push(marker);
}
var markerCluster = new MarkerClusterer(map, gmarkers);

Related

how to show info window in google map without click event

How to show infowindow on page load in google maps. It should automatically show the infowindow pop up. I have multiple markers in the google map. I need all markers info window should open in page load.
js fiddle link
https://jsfiddle.net/vq7zfbgj/
code:
var locations = [
[
"Market 1",
22.809999,
86.179999,
5,
"Market1",
"Market1",
"Market1",
"found"
],
[
"Market 2",
22.801111,
86.171111,
5,
"Market2",
"Market2",
"Market2",
"found"
]
]
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(22.803444, 86.179525),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
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
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
}
})(marker, i));
}

You can open multiple markers at once by initiating InfoWindow separately for each marker. I'd suggest removing the original var infowindow and doing the following within the for loop for each marker:
marker.infowindow = new google.maps.InfoWindow();
});
marker.infowindow.setContent(locations[i][0], locations[i][6]);
marker.infowindow.open(map, marker);
https://jsfiddle.net/vq7zfbgj/16/

I modified your fiddle to this and the infoWindow will open on page load. I add another marker just to ilustrate that could resolve more markers. Hope it helps.
for (i = 0; i < locations.length; i++) {
var infowindow = new google.maps.InfoWindow;
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], locations[i][6]);
infowindow.open(map, marker);
}
})(marker, i));
infowindow.setContent(locations[i][0], locations[i][6]);
infowindow.open(map, marker);
}

google maps api v3 - targeting markers

I set my markers like this
var
marker,
i,
markers = [];
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: 'img/markers/t1.png',
id: locations[i][3]
});
markers.push(marker);
marker.addListener('mouseover', function() {
marker.setIcon("img/serve-bracket.png");
});
}
This only seems to attach the event handler on the last one. How do I add it to all markers

You need to wrap your addListener in a closure.
var marker, i;
var markers = [];
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: 'img/markers/t1.png',
id: locations[i][3]
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
marker.setIcon("img/serve-bracket.png");
}
})(marker, i));
markers.push(marker);
}

animated gif in array in google map

I am trying to use optimize:false parameter in my code to use animated gif as a mouseover:
var icon1 = "circle.png";
var icon2 = "circlered.gif";
var markers = [];
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,
visible: false,
icon: icon1
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
when I use for example:
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,
visible: false,
icon: icon2, //here I purposely changed it to animated gif first
optimize: false
});
I have no problems.
but when I try to use the same here:
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
optimize:false;// here is the wrong code obviously
}
})(marker, i));
I get the image disappearing not animating
Please suggest solution
based on the suggestions posted by the #geocoder here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
html,
body,
#map-canvas{
width: 100%;
margin: 0px;
padding: 0px;
height: 880px;
z-index:2
}
#maptwo {
z-index:1
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var map = new google.maps.Map(
document.getElementById("map-canvas"), {
center: new google.maps.LatLng(40.222869, 47.602673),
zoom: 13,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var icon1 = "http://maps.google.com/mapfiles/ms/micons/blue.png";
var icon2 = {
url: "http://blogs.technet.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-01-35/e8nZC.gif",
scaledSize: new google.maps.Size(75, 100)
};
var markers = [];
var marker, i;
var bounds = new google.maps.LatLngBounds();
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,
optimized: false,
visible: false,
icon: icon1
});
bounds.extend(marker.getPosition())
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
/* Change markers on zoom */
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
// iterate over markers and call setVisible
for (i = 0; i < locations.length; i++) {
markers[i].setVisible(zoom >= 11);
}
});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
['Location1', 39.031586, 46.590031, 5],
['Location2', 38.998439, 46.557591, 4],
['Location3', 38.913429, 46.547370, 3],
['Location4', 39.090245, 46.703794, 2],
['Location5', 39.130588, 46.696239, 1]
];
//here I create a function that will show/hide layers that are defined by the latLng values
function toggleLayer(firLayer, id) {
if ($('#' + id).is(':checked')) {
firLayer.setMap(map);
} else {
firLayer.setMap(null);
}
}
//this is the end of the function
// Fir AZE is one of the many layers that are drawn
drawAZE = new google.maps.Polygon({
path: firAZE,
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00CCFF',
fillOpacity: 0.15
});
//end of FirAZE end of layer
// Add a listener for the drawAZE mouseover/mouseout event.
google.maps.event.addListener(drawAZE ,'mouseover',function(){
this.setOptions({fillColor: "#FF0000"},{fillOpacity:"0.8"});
});
google.maps.event.addListener(drawAZE ,'mouseout',function(){
this.setOptions({fillColor: "#00CCFF"},{fillOpacity:"0.5"});
});
//end of drawAZE listener
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="maptwo"></div>
<input id="fir_azerbaijan" type="checkbox" onClick="toggleLayer(drawAZE,'fir_azerbaijan')" /> AZERBAIJAN
</body>
</html>
as you can see the code in "Fir AZE" draws a layer.
then later it(the drawn layer) is supposed to be shown on click , the example provided initially at this link www.visualguide.ca/example shows that.
when I was asking about the solution for the animated marker I thought that I had problem with optimize :false - because all their lines of code were working ok.
as I have tried to implement solution provided below it worked! but I lost my ability to show/hide layers on click.sorry if this was not clear initially
my intial code was:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(40.222869, 47.602673),
mapTypeId: google.maps.MapTypeId.TERRAIN,
zIndex: 3
};
// Set map
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
it was changed to
function initialize() {
var map = new google.maps.Map(
document.getElementById("map-canvas"), {
center: new google.maps.LatLng(40.222869, 47.602673),
zoom: 13,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var bounds = new google.maps.LatLngBounds();
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,
optimized: false,
visible: false,
icon: icon1
});
bounds.extend(marker.getPosition())
//....
}
map.fitBounds(bounds);
}
I have compared line by line to locate this, and am stumbled.

One option is to create the marker with {optimized: false}:
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,
optimized: false,
icon: icon1
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
}
code snippet with animated gif:
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var icon1 = "http://maps.google.com/mapfiles/ms/micons/blue.png";
var icon2 = {
url: "http://blogs.technet.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-01-01-35/e8nZC.gif",
scaledSize: new google.maps.Size(75, 100)
};
var markers = [];
var marker, i;
var bounds = new google.maps.LatLngBounds();
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,
optimized: false,
icon: icon1
});
bounds.extend(marker.getPosition())
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function(evt) {
infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
marker.setIcon(icon2);
}
})(marker, i));
markers.push(marker); // save all markers
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function(evt) {
infowindow.close();
marker.setIcon(icon1);
}
})(marker));
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
['palace', 52.231871, 21.005841],
['arkadia', 52.257305, 20.984481],
['stadium', 52.215147, 21.035074]
];
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

somehow I have managed(with the help of geocoder and Alex - thanks
//announce my variables
var icon1 = "circle.png";
var icon2 = "circlered.gif";
var markers = [];
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,
optimized:false, // <-- required for animated gif
visible: false,
icon: icon1
});
I also managed to have my layers appearing on click

Google map info window on wrong locations

I'm following this code for Multiple Markers in Google map, my problem is once I put my data in the map their info window are all in the wrong coordinates, they seem scrambled. I am using US as my center. So here is the code below:
var locations = [
['Russ Martin</br>Montana',43.299428,-74.217933],
['Carey Fischer</br>New York',46.879682,-110.362566],
['Brandon Born</br>Connecticut',40.714353,-74.005973],
['Joe Tocyloski</br>Pennysylvania',41.603221,-73.087749]
];
var us = new google.maps.LatLng(42.746632,-75.770041);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: us,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
/*icon:{
strokeColor:'green',
scale:3
},*/
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
animation:google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.close(map, marker);
}
})(marker, i));
console.log(locations);
}
Any help would be appreciated.
Fiddle

below statement may
this will surely help u
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, this);
}

How to change the image for a set of map markers

I am creating a map with 5 groups of markers. I have all the coordinates in place and the markers appear on the map, but I am not sure how to change the image for each group. I have looked at other examples, but they have not worked for me. If there is a way to change the image for either the group of coordinates or each individual coordinate, I would appreciate the help.
Here is what I have so far:
<script type="text/javascript"> function initialize() {
//add map, the type of map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(31.5603, -91.4031),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//add locations
var cottages = [
['Savannah Cottage<br />412 S.Pearl Street', 31.55600224874313, -91.4073497056961] ];
var restaurants = [
['Cotton Alley Cafe<br />208 Main Street<br />(601)442-7452<br />Website', 31.561075,-91.40503100000001]
];
var bars = [
['Under-the-Hill Saloon', 31.559589, -91.41074700000001]
];
var tours = [
['Auburn Antebullum Home<br />400 Duncan Avenue<br />(601)442-5981', 31.5457833, -91.39274319999998]
];
var spas = [
['Anruss & Co Salon and Spa<br />212 North Commerce Street<br />(601) 445-2007<br />Website', 31.561061,-91.40116799999998]
];
//declare marker call it 'i'
var marker, i;
//declare infowindow
var infowindow = new google.maps.InfoWindow();
//add marker for COTTAGES
for (i = 0; i < cottages.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(cottages[i][1], cottages[i][2]),
map: map,
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(cottages[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
//add markers for RESTAURANTS
for (i = 0; i < restaurants.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(restaurants[i][1], restaurants[i][2]),
map: map,
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(restaurants[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
//add markers for BARS
for (i = 0; i < bars.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(bars[i][1], bars[i][2]),
map: map,
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(bars[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
//add markers for TOURS
for (i = 0; i < tours.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(tours[i][1], tours[i][2]),
map: map,
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(tours[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
//add markers for SPAS
for (i = 0; i < spas.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(spas[i][1], spas[i][2]),
map: map,
});
//click function to marker, pops up infowindow
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(spas[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

I'm not sure exactly what you have in mind but here's some code that may help :
function initialize() {
//add map, the type of map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(31.5603, -91.4031),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//create infowindow
var infowindow = new google.maps.InfoWindow();
//add locations (as in the question)
var cottages = [...];
var restaurants = [...];
var bars = [...];
var tours = [...];
var spas = [...];
//Make an array that lists all the locations arrays.
var allLocations = [cottages, restaurants, bars, tours, spas];
//Define a generalized click handler for all markers.
//ie. one handler, not one per marker.
function clickMarker() {
var data = this.data;
infowindow.setContent(data.category[data.index][0]);
infowindow.open(map, this);
//HERE, you can loop through `data.category.markers` and
//do whatever is necessary to each marker in the category
//eg change their icons.
for(var i=0; i<data.category.markers.length; i++) {
var url = ...;//expression that determines which marker icon to use
data.category.markers[i].setIcon(url);
}
}
//Now loop through all the markers arrays and add markers to the map
for (var i=0; i<allLocations.length; i++) {
var arr = allLocations[i];
//Create an associated array in which to store references to category's markers
arr.markers = [];
for (var marker, j=0; j<arr.length; j++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(arr[j][1], arr[j][2]),
map: map
});
arr.markers[j] = marker;
//This allows the click hander to be generalized,
//and for each marker to have a reference back
//to its category array, and its own index.
marker.data = {
category: arr,
index: j
};
google.maps.event.addListener(marker, 'click', clickMarker);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
See comments in code.

Develop Reference

JavaScript is the programming language of the Web.

Clustering markers with infowindow in googlemaps v3 api - javascript

Related

how to show info window in google map without click event

google maps api v3 - targeting markers

animated gif in array in google map

Google map info window on wrong locations

How to change the image for a set of map markers

Categories

Resources