Markerclusterer and infowindow v3 is not working properly - google-maps

I have used the sample code from google for markerclusterer. I added a code to display the coordinate of the marker in an infowindow for the markerclusterer v3 but the problem is it only loads the last marker latlang into the window: Can anyone help to resolve this issue.
function initialize() {
var center = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var markers = [];
for (var i = 0; i < 100; i++) {
var dataPhoto = data.photos[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude,
dataPhoto.longitude);
var info = dataPhoto.photo_id;
var marker = new google.maps.Marker({
position: latLng
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setPosition(latLng);
infowindow.setContent(latLng.toString());
infowindow.open(map,marker);
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
</script>`

Here I found the answer using the hint #geocodezip provided. The event addListener should be changed as follows:
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(marker.position.toString());
infowindow.open(map, marker);
}
})(marker, i));

Related

Google Maps, open info window after click on a link

i have this code to display a google map:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(40.714364, -74.005972),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
var locations = [
['New York', 40.714364, -74.005972, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png']
];
var marker, i;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
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: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="googlemap" style="width: 100%; height: 500px;"></div>
Open Info Window
That's not the final code, because i want add more markers.
The problem is, that i need external links to open the info window of a marker.
For Example:
Link 1 opens the info window from marker 1
Link 2 opens the info window from marker 2
etc...
I need a link something like this:
Open Info Window One
Here is my code in jsfiddle:
http://jsfiddle.net/fJ4jG/3/
I found couple of solutions, but i don't know how to use this code together with my code.
It should work like this:
http://www.geocodezip.com/v3_MW_example_map2.html
Thanks for every help!
What that example does is it creates an array where it stores the markers. So when the markers are created, they get pushed to that markers array. When you click on the link you send an index with the function that is a reference to the marker in the array.
So JavaScript looks like this:
var markers = [];
// The array where to store the markers
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(40.714364, -74.005972),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
var locations = [
['New York', 40.714364, -74.005972, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png']
];
var marker, i;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
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: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
// Push the marker to the 'markers' array
markers.push(marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
// The function to trigger the marker click, 'id' is the reference index to the 'markers' array.
function myClick(id){
google.maps.event.trigger(markers[id], 'click');
}
And in your HTML a tag you add the myClick function like this:
Open Info Window
Example: http://jsfiddle.net/fJ4jG/9/
As in my example.
add a global array to save references to the google.maps.Marker objects:
var gmarkers = [];
push the markers onto that array as you create them
gmarkers.push(marker);
trigger the "click" event on the desired marker:
Open Info Window
jsfiddle
use this code i already tried it
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(locations[i][0]);
infoWindow.open(map, marker);
});

Multiple markers map having zoom in issue for single marker

below is the code for displaying a Google map with multiple markers. The markers data is coming from DB so it can contain 1 location or multiple locations.
For multiple markers the map is centered and auto zoomed. The problem is if there is only 1 marker , the map zoom in to maximum level. Can someone guide me how to fix the zooming for single marker.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = <?php echo $marker;?>;
$(document).ready(function() {
// Handler for .ready() called.
initializeMaps();
});
function initializeMaps() {
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
zoom: 6
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
map.setCenter(pos);
if(i==0){
map.setZoom(5);
}
bounds.extend(pos);
marker = new google.maps.Marker({
position: pos,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
//alert('asdfsdfdsaf');
}
})(marker, i));
}
map.fitBounds(bounds);
}
</script>
<div id="map_canvas" style="width:100%; height:400px"></div>
call map.fitBounds(bounds) only when there are more than 1 marker

Not able to register click listener on a marker in Google Maps v3

Actually i am migrating from Maps v2 to v3. But i am facing a really weird error.
Here is my code
function createMarker(arrayPos,title,posn) {
var size = {width:15,height:15};
var iconSize = new google.maps.Size(size.width,size.height);
var iconAnchor = new google.maps.Point(9, 34);
var marker = new google.maps.Marker({
icon: new google.maps.MarkerImage("my.png",iconSize,null,iconAnchor),
title: title,
animation: google.maps.Animation.DROP,
position: posn
});
marker.html = getMarkerHtml(arrayPos);
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(marker.html);
infowindow.open(map,marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(marker.html);
infowindow.open(map,marker);
});
return marker;
}
In this i was experimenting opening the infowindow as soon as markers are added and also on the click listener. In this all the infowindow opens but the listerner is not registered on the first marker always. Any pointers in this?
I have modified your code as following and it works. Would you check whether it solves your issue?
In order to simulate a marker click you should add: google.maps.event.trigger(marker, 'click');
function createMarker(arrayPos,title,posn) {
var size = {width:15,height:15};
var iconSize = new google.maps.Size(size.width,size.height);
var iconAnchor = new google.maps.Point(9, 34);
var marker = new google.maps.Marker({
icon: new google.maps.MarkerImage("my.png",iconSize,null,iconAnchor),
title: title,
animation: google.maps.Animation.DROP,
position: posn
});
//marker.html = getMarkerHtml(arrayPos);
var infowindow = new google.maps.InfoWindow();
//infowindow.setContent(marker.html);
//infowindow.open(map,marker);
var markersHTML = getMarkerHtml(arrayPos);
google.maps.event.addListener(marker, 'click', (function(marker, markersHTML) {
return function() {
infowindow.setContent(markersHTML);
infowindow.open(map, marker);
}
})(marker, markersHTML));
return marker;
}
Example:
<!doctype html>
<html lang="en">
<head>
<title>Google Maps</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript">
var cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177,-89.406738, 2]
],
demoCenter = new google.maps.LatLng(41,-87),
map;
function initialize()
{
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: demoCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
function addMarkers()
{
var marker,
i,
infowindow = new google.maps.InfoWindow();
for (i = 0; i < cityList.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
title: cityList[i][0]
});
var markersHTML = ["<div>",cityList[i][0],"</div>"].join("");
google.maps.event.addListener(marker, 'click', (function(marker, markersHTML) {
return function() {
infowindow.setContent(markersHTML);
infowindow.open(map, marker);
}
})(marker, markersHTML));
}
}
$(document).ready(function() {
initialize();
});
$(document).on('click', '.add-markers', function(e) {
e.preventDefault();
addMarkers();
});
</script>
</head>
<body>
<div id="basic-map">
<div id="map_canvas" style="height:350px;"></div>
Add Some Markers
</div>
</body>
</html>
I hope this helps.

Google Map Zoom To Fit

I have developed a map that uses a geo-coordinate from a database using a cluster marker example. I have tried to make it zoom automaticly by using LatLngBounds();
<script type="text/javascript">
function initialize() {
var center = new google.maps.LatLng(9.4419, 9.1419);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
// create the infowindow out of the for boucle
var infoWindow = new google.maps.InfoWindow;
var bounds = new google.maps.LatLngBounds();
for ( var i = 0; i < latlng.length; i++ ) {
var latLng = new google.maps.LatLng(latlng.lat,latlng.lng);
var html = 'test show in infowondow';
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon:"/img/icon1.jpg",
title:"test title",
});
// call to the function....
bindInfoWindow(marker, map, infoWindow, html);
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
// create a function bindInfoWindow
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
make bounds global.
then after
var latLng = new google.maps.LatLng(latlng.lat,latlng.lng);
EDIT: and as Marcelo pointed out change this to:
var latLng = new google.maps.LatLng(latlng[i].lat,latlng[i].lng);
add:
bounds.extend(latLng)
after
var markerCluster = new MarkerClusterer(map, markers);
add:
map.fitBounds(bounds);

GoogleMap Markers are Not Clickable on the Mobile Devices

GoogleMap Markers are Not Clickable on the Mobile Devices (Touch Screens).
But, ok on any PC, so I can't figure out what is the point.
Here is my code:
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(60.037760, -44.100494),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var locations = [
['4lvin', 60.074433, -44.011917],
['5irius', 60.037760, -44.100494]
];
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
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('<h2>'+locations[i][0]+'</h2>\n<a>Read more..</a>');
infowindow.open(map, this);
}
})(marker, i));
}
But then, when i use the following codes (the formal way of google for "google.maps.event.addListener"), Markers are showing only the same InfoWindows.
var infowindow = new google.maps.InfoWindow({content: locations[i][0]});
new google.maps.event.addListener( marker, 'click', function() {
infowindow.open(map,this);
});
The problem is because you're doing a loop, you need to use a closure, otherwise all markers will just get the content you want to associate with the last marker. Your first bit of code is doing this correctly. Suggest you change to do the same again:
var infowindow = new google.maps.InfoWindow({content: locations[i][0]});
google.maps.event.addListener( marker, 'click', function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map,this);
}
})(marker, i));
I found the following solution :
1. create marker with option
"optimized: false" : ex => new google.maps.Marker({..., optimized: false, ...});
adding another event listener
google.maps.event.addDomListener(marker, "click", function() {...});
From google forum