Develop Reference

How to solve Google Map markers with same latitude and longitude?

Currently I am creating a Google Map View for my listing website with multiple markers added which all latitudes and longitudes are retrieved from database. Now I met a problem, which is having same latitude and longitude markers. I searched through the net and found a solution which is to use Marker Cluster but i have no idea with that, please help.
This is my code for getting the current location, marked with different icon and also adding multiple markers which the lat and lon are retrieved from the database:
lat = position.coords.latitude;
lon = position.coords.longitude;
latlon = new google.maps.LatLng(lat, lon);
mapholder = document.getElementById('mapholder');
mapholder.style.height = '500px';
mapholder.style.width = '1300px';
var myOptions = {
center:latlon,zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
}
var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
var infowindowforCurrentLoc = new google.maps.InfoWindow();
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var marker = new google.maps.Marker({
draggable: true,
animation: google.maps.Animation.DROP,
position: latlon,
icon: image,
map: map,
});
marker.addListener('click', toggleBounce);
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
infowindowforCurrentLoc.setContent('<h2>You are Here!</h2>');
infowindowforCurrentLoc.open(map, marker);
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
var markerr = new google.maps.Marker();
<?php
$filtering = $_GET["filtering"];
if($filtering=="condo"||$filtering=="commercial"){
$sql = "SELECT * FROM propertylisting WHERE propertytype='$filtering'";
}
else{
$sql = "SELECT * FROM propertylisting WHERE listingtype='$filtering'";
}
$result=mysql_query($sql);
$totallist = mysql_num_rows($result);
$tmpcount=0;
echo"var infowindow = new google.maps.InfoWindow(), markerr, i;
var markers=new Array(3);";
while($rows=mysql_fetch_array($result)){
echo"markers[".$tmpcount."]=new Array(3);
markers[".$tmpcount."][0]='".$rows['listingtopic']."';
markers[".$tmpcount."][1]= ".$rows['listinglatitude'].";
markers[".$tmpcount."][2]= ".$rows['listinglongitude'].";
";
$tmpcount=$tmpcount+1;
}
?>
for (i = 0; i < markers.length; i++) {
markerr = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map
});
google.maps.event.addListener(markerr, 'click', (function(markerr, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, markerr);
}
})(markerr, i));
}

I think that you can use the marker cluster (https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js) for that. Modify your script, which creates the markers like this:
var markers = [];
for (i = 0; i < markers.length; i++) {
var markerr = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map
});
markers.push(markerr);
}
var markerCluster = new MarkerClusterer(map, markers);

Google map, polyline draws "extra" line -can't see what's going on

I query 2 "sets" of coordinates from a database, showing a track that we have flown a balloon.
I place the markers during takeoff and landing.
Now I want to draw a polyline between takeoff and landing in the 2 tracks, but for some reason also the 2 landing sites linked with the polyline.
Example: http://minballontur.dk/all/showtracknew.php
I cannot figure out what happens - I try to write the length of my coordinate array to 0, in each loop, but it does not help.
function load() {
var lastlat;
var lastlng;
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(55.44, 11.80),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow;
var flightPlanCoordinates = [];
<?php while($row = mysql_fetch_array($result)) { ?>
// Change this depending on the name of your PHP file
flightPlanCoordinates.length = 0;
downloadUrl("phpsqlajax_genxmlall.php?LogDate=<?php echo $row['Log_Date'] ?>&TimeOfDay=<?php echo $row['TimeOfDay'] ?>&Log_Name=<?php echo $row['Log_Name'] ?>", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
flightPlanCoordinates[i] = new google.maps.LatLng(markers[i].getAttribute("lat"), markers[i].getAttribute("lng"));
}
flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2
});
flightPath.setMap(map);
//Show first marker
var name = markers[0].getAttribute("name");
var address = markers[0].getAttribute("address");
var type = markers[0].getAttribute("BalloonStatus");
var point = new google.maps.LatLng(
parseFloat(markers[0].getAttribute("lat")),
parseFloat(markers[0].getAttribute("lng")));
var html = "<div style = 'height:75px;width:250px'><b>" + name + "</b> <br/>" + address +"<br/> Status : "+type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
lastlat = markers[0].getAttribute("lat");
lastlng = markers[0].getAttribute("lng");
//Show last marker
var point1 = new google.maps.LatLng(
parseFloat(markers[0].getAttribute("lat")),
parseFloat(markers[0].getAttribute("lng")));
var point2 = new google.maps.LatLng(
parseFloat(markers[markers.length-1].getAttribute("lat")),
parseFloat(markers[markers.length-1].getAttribute("lng")));
var distance = getDistance(point1, point2);
var distancekm = Math.round((distance/1000)*10)/10;
var name = markers[markers.length-1].getAttribute("name");
var address = markers[markers.length-1].getAttribute("address");
var type = markers[markers.length-1].getAttribute("BalloonStatus");
var point = new google.maps.LatLng(
parseFloat(markers[markers.length-1].getAttribute("lat")),
parseFloat(markers[markers.length-1].getAttribute("lng")));
var html = "<div style = 'height:75px;width:250px'><b>" + name + "</b> <br/>" + address +"<br/>Distance : "+ distancekm +" km<br/> Status : "+type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
lastlat = markers[markers.length-1].getAttribute("lat");
lastlng = markers[markers.length-1].getAttribute("lng");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
bounds.extend(new google.maps.LatLng(markers[i].getAttribute("lat"), markers[i].getAttribute("lng")));
}
map.fitBounds(bounds);
}); //Downlaod URL
<?php } ?> //End DB Loop
} // Load

You are using the same array of coordinates in both asynchronous callback functions. It is being reset to 0 length outside of the callback functions, before either of them runs, so you are ending up with all the coordinates from both polylines in the second one.
Something like this should work:
function load() {
var lastlat;
var lastlng;
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(55.44, 11.80),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow;
<?php while($row = mysql_fetch_array($result)) { ?>
downloadUrl("phpsqlajax_genxmlall.php?LogDate=<?php echo $row['Log_Date'] ?>&TimeOfDay=<?php echo $row['TimeOfDay'] ?>&Log_Name=<?php echo $row['Log_Name'] ?>", function(data) {
// declare a new array of coordinates in each callback function.
var flightPlanCoordinates = [];
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
flightPlanCoordinates[i] = new google.maps.LatLng(markers[i].getAttribute("lat"), markers[i].getAttribute("lng"));
}
flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2
});
flightPath.setMap(map);
//Show first marker
var name = markers[0].getAttribute("name");
var address = markers[0].getAttribute("address");
var type = markers[0].getAttribute("BalloonStatus");
var point = new google.maps.LatLng(
parseFloat(markers[0].getAttribute("lat")),
parseFloat(markers[0].getAttribute("lng")));
var html = "<div style = 'height:75px;width:250px'><b>" + name + "</b> <br/>" + address +"<br/> Status : "+type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
lastlat = markers[0].getAttribute("lat");
lastlng = markers[0].getAttribute("lng");
//Show last marker
var point1 = new google.maps.LatLng(
parseFloat(markers[0].getAttribute("lat")),
parseFloat(markers[0].getAttribute("lng")));
var point2 = new google.maps.LatLng(
parseFloat(markers[markers.length-1].getAttribute("lat")),
parseFloat(markers[markers.length-1].getAttribute("lng")));
var distance = getDistance(point1, point2);
var distancekm = Math.round((distance/1000)*10)/10;
var name = markers[markers.length-1].getAttribute("name");
var address = markers[markers.length-1].getAttribute("address");
var type = markers[markers.length-1].getAttribute("BalloonStatus");
var point = new google.maps.LatLng(
parseFloat(markers[markers.length-1].getAttribute("lat")),
parseFloat(markers[markers.length-1].getAttribute("lng")));
var html = "<div style = 'height:75px;width:250px'><b>" + name + "</b> <br/>" + address +"<br/>Distance : "+ distancekm +" km<br/> Status : "+type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
lastlat = markers[markers.length-1].getAttribute("lat");
lastlng = markers[markers.length-1].getAttribute("lng");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
bounds.extend(new google.maps.LatLng(markers[i].getAttribute("lat"), markers[i].getAttribute("lng")));
}
map.fitBounds(bounds);
}); //Download URL
<?php } ?> //End DB Loop
} // Load

Google Maps API with multiple markers / modals

I am using the Google Maps API JS v.3 that has several hundred markers. I want to open a modal with info specific to the marker they clicked on. I'm plan on using PHP and AJAX to get the modal data from the MySQL Database, but I'm not sure how to determine which marker the user clicked...
Any help is greatly appreciated
`
var map;
//icon variables
/*
var dem = 'path/to/blue/icon.png';
var rep = 'path/to/red/icon.png';
var oth = 'path/to/grey/icon.png';
*/
var locations = [
<?php
$c = 0;
$nr = mysqli_num_rows($gethouses);
while($z = mysqli_fetch_array($gethouses)):
?>
['<?php echo $z['name_first'].' '.$z['name_last']; ?>', <?php echo $z['lat']; ?>, <?php echo $z['lng']; ?>, 4],
<?php
$c++;
endwhile;
?>
];
var map = new google.maps.Map(document.getElementById('google_world_map'), {
zoom: 10,
center: new google.maps.LatLng(39.675, -119.98),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
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
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
</script>`

You can add a custom parameter in your marker object (which value ideally should be unique).
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,
custom_param: some_unique_value
});
....
}
Then on your marker click event you can identify which marker is clicked by getting the value in this case marker.custom_param.
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
// make use of `marker.custom_param`
var myCustomParam = marker.custom_param;
}
})(marker, i));
}

How to close an infowindow

I have already have an array of markers, I want to close an opened infowindow when I click another marker.
I know that with the v3 API, I can close a infowindow with the InfoWindow.close() method.But where to add the code?I have tried a lot but failed.
I have another question ,why need I click the link in "side_bar_div" tiwce to call the method myclick(i)?
<script type="text/javascript">
var markers=[];
var side_bar_html='<table border=0 cellpadding=0><tr>';
var tdrow = 1;
var i = 0;
function creatmarker(lat,long,map,html,index){
var mylatlng = new google.maps.LatLng(lat,long);
var marker = new google.maps.Marker({
position: mylatlng,
map: map,
zIndex: index
});
var infowindow = new google.maps.InfoWindow({
content: html
});
markers.push(marker);
side_bar_html +='<td width=330 valign=top align=left><a id="side_bar_'+i+'" href="javascript:myclick('+ (markers.length-1) +');">'+html+'</a></td>';
tdrow++;
i++;
if (tdrow > 2){side_bar_html += '</tr><tr>'; tdrow =1; }
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker);
});
function myclick(i){
var id="side_bar_"+i;
google.maps.event.addDomListener(document.getElementById(id), "click", function(){ google.maps.event.trigger(markers[i], "click");
});
}
function initialize(){
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("mymap"),myOptions);
var lat = "-33.890542";
var lng = "151.274856";
var html = 'Bondi Beach';
creatmarker(lat,lng,map,html,5);
var lat = "-33.923036";
var lng = "151.259052";
var html = 'Coogee Beach';
creatmarker(lat,lng,map,html,4);
var lat = "-34.028249";
var lng = "151.157507";
var html = 'Cronulla Beach';
creatmarker(lat,lng,map,html,3);
var lat = "-33.80010128657071";
var lng = "151.28747820854187";
var html = 'Manly Beach';
creatmarker(lat,lng,map,html,2);
var lat = "-33.950198";
var lng = "151.259302";
var html = 'Maroubra Beach';
creatmarker(lat,lng,map,html,1);
side_bar_html +='</tr></table>';
document.getElementById("side_bar_div").innerHTML = side_bar_html;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Try the following code snippet:
var infoWindows = [];
google.maps.event.addListener(marker,'click',function(){
closeInfowindow();
var infowindow = new google.maps.InfoWindow({
content: html
});
infowindow.open(map,marker);
infoWindows[0] = infowindow;
});
function closeInfowindow(){
if(infoWindows.length > 0){
infoWindows[0].set("marker",null);
infoWindows[0].close();
infoWindows.length = 0;
}
}
Hope this helps you :-)

The correct way to do this is to store it in a local variable and then add an eventlistener like this:
function addeventlistenerinfo(marker, infowindow, i){
google.maps.event.addListener(marker, 'click', function() {
if (currentinfowindow)
currentinfowindow.close();
infowindow.open(map,marker);
currentinfowindow = infowindow;
});
markersarray[i] = marker;
}
currentinfowindow is a global variable that will only hold the open infowindow if one exists.
No need to use an array or an extra method :)

json returned array of markers are pointing to last markers

what i am doing is that i am placing multiple markers on map returned from json array,here is my code.my markers are plotted correctly but when i click on each marker it make info window of one marker that is last marker of array
function latLongCallback(latitutde,longitutde){
var latlng = new google.maps.LatLng(latitutde, longitutde);
var options = {zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById('map'), options);
$.ajax({type: "GET",
dataType: 'json',
url: "http://www.xyz.com/xcv/xainee/test/markers.php",
success: function(response){
var total=response.length;
data_array,name,type,address,lat,lon,point,infowindow,marker,arrival,departure,notes;
var icon_image = 'http://www.xyz.com/userftp/fawad/test/images/map-icon.png';
for(var i=0; i < total; i++)
{
data_array=response[i];
name=data_array['name'];
address=data_array['address'];
arrival=data_array['arrival'];
departure=data_array['departure'];
notes=data_array['notes'];
lat=data_array['lat'];
lon=data_array['lon'];
contentString ="Name : "+name+"<br/> Location : "+address+"<br/> Arrival :"+arrival+"<br/> Departure : "+departure+"<br/> Notes : "+notes;
point = new google.maps.LatLng(lat,lon);
infowindow = new google.maps.InfoWindow({content: contentString,maxWidth: 400,maxHeight: 201});
marker = new google.maps.Marker({map: map,icon: icon_image, position: point});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker);});
}
}
});
return;
}
here is my markers.php
<?php session_start();
include_once("database.php");
$data=array();
$retrive_marker_query = "SELECT fb_user.name,schedule.location,schedule.arrival,schedule.departure,schedule.notes,schedule.lat,schedule.lon FROM schedule,fb_user where fb_user.fb_id = schedule.fb_id";
$result = db_execute($retrive_marker_query);
$cnt=0;
while ($row = #mysql_fetch_assoc($result)){
$name=$row['name'];
$address= $row['location'];
$arrival= $row['arrival'] ;
$departure= $row['departure'] ;
$notes= $row['notes'] ;
$lat= $row['lat'];
$lon= $row['lon'];
$data[$cnt]['name']=$name;
$data[$cnt]['address']=$address;
$data[$cnt]['arrival']=$arrival;
$data[$cnt]['departure']=$departure;
$data[$cnt]['notes']=$notes;
$data[$cnt]['lat']=$lat;
$data[$cnt]['lon']=$lon;
$cnt++;
}
$data=json_encode($data);
echo($data);
?>
why my markers content are same although all markers are plotted in different lat and lon