Reputation: 47
I tried to make google maps for cities in jordan that will Show information about the city to the user when the marker clicked
My problem is When I tried to get the Marker that been clicked by the user ,it always send the last marker in the For-loop that instantiate the markers and give the information
The for-loop works will and Give each marker it's own title,label and give an event listener for each marker
How can I get the clicked marker ?
<!DOCTYPE html>
<html>
<head>
<title>Gis Map</title>
<style>
.background {} p {
background-color: white;
}
span {
color: blue;
}
#Footer {
width: 100%;
height: 30px;
position: relative;
left: 0px;
bottom: 0px;
}
#Footer_text {
padding: 10px;
color: black;
background-color: #5B1B14;
}
#Fixed {
position: fixed;
top: 0px;
left: 0px;
height: 70px;
width: 100%;
z-index: 3;
background-color: #5B1B14;
}
#Fixed_img_c {
width: 20%;
height: 100%;
margin: 0 auto;
}
#Fixed_img {
height: 100%;
}
.paragraphs {
text-align: center;
z-index: 1;
font-size: 20px;
width: 100%;
color: red;
}
/*************************Menu*****************************/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0px;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover,
.offcanvas a:focus {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
</style>
</head>
<body>
<div id="Fixed">
<div id="Fixed_img_c">
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<div class="container">
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">Something</a>
<a href="#">Something</a>
</div>
<div id="map" style="width:100%;height:500px"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(
document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(31.9, 35.8),
mapTypeId: 'terrain'
});
//jordan cities locations
var locations = [
[31.8354533, 35.9674337],
[31.186446, 35.6248844],
[30.8071736, 35.5228078],
[32.0522945, 35.9935951],
[31.7157524, 35.7633807],
[32.0321557, 35.655972],
[32.3402518, 36.1527321],
[32.2699656, 35.824437],
[32.3415654, 35.7322292],
[32.5525113, 35.81239],
[30.2200923, 35.5467541],
[29.5909744, 35.1750487]
]
var info = [
["Amman", 4.007256],
["Al_Karak", 316.629],
["Tafilah", 96.291],
["Zarqa ", 1.364878],
["Madaba ", 189.192],
["Balqa ", 491.709],
["Mafraq ", 549.948],
["Jerash ", 237.059],
["Ajloun ", 176.080],
["Irbid ", 1.770158],
["Ma'an", 144.083],
["Aqaba ", 188.160]
]
var markers = new Array();
for (var i = 0; i < locations.length; i++) {
var coords = locations[i];
var latLng = new google.maps.LatLng(coords[0], coords[1]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
label: info[i][0],
title: info[i][0]
});
var infowindow = new google.maps.InfoWindow({
content: info[i][1] + ""
});
google.maps.event.addListener(marker, 'click', function() {
openNav();
//changeText();
infowindow.open(map, marker);
});
google.maps.event.addListener(map, 'click', function() {
closeNav()
});
}
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZInPKXBMPYpDNRGJwjGqJb6MRGog_haU&libraries=visualization&callback=initMap">
</script>
<div id="Footer">
<p id="Footer_text" class="paragraphs">dufault</p>
</div>
</div>
</body>
</html>
Upvotes: 3
Views: 8150
Reputation: 161404
You need to associate the infowindow with the correct marker. One solution to that is function closure as demonstrated in the similar question: Google Maps JS API v3 - Simple Multiple Marker Example. For your code:
google.maps.event.addListener(marker, 'click', function(marker,i) {
return function() {
openNav();
//changeText();
// set the infowindow content for this marker (the function has closure on i)
infowindow.setContent(info[i][1]+"");
// open the infowindow on this marker (the function has closure on marker)
infowindow.open(map, marker);
}}(marker,i));
code snippet:
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
var map;
function initMap() {
map = new google.maps.Map(
document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(31.9, 35.8),
mapTypeId: 'terrain'
});
//jordan cities locations
var locations = [
[31.8354533, 35.9674337],
[31.186446, 35.6248844],
[30.8071736, 35.5228078],
[32.0522945, 35.9935951],
[31.7157524, 35.7633807],
[32.0321557, 35.655972],
[32.3402518, 36.1527321],
[32.2699656, 35.824437],
[32.3415654, 35.7322292],
[32.5525113, 35.81239],
[30.2200923, 35.5467541],
[29.5909744, 35.1750487]
]
var info = [
["Amman", 4.007256],
["Al_Karak", 316.629],
["Tafilah", 96.291],
["Zarqa ", 1.364878],
["Madaba ", 189.192],
["Balqa ", 491.709],
["Mafraq ", 549.948],
["Jerash ", 237.059],
["Ajloun ", 176.080],
["Irbid ", 1.770158],
["Ma'an", 144.083],
["Aqaba ", 188.160]
]
var markers = new Array();
for (var i = 0; i < locations.length; i++) {
var coords = locations[i];
var latLng = new google.maps.LatLng(coords[0], coords[1]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
label: info[i][0],
title: info[i][0]
});
var infowindow = new google.maps.InfoWindow({
content: info[i][1] + ""
});
google.maps.event.addListener(marker, 'click', function(marker, i) {
return function() {
openNav();
//changeText();
infowindow.setContent(info[i][1] + "");
infowindow.open(map, marker);
}
}(marker, i));
google.maps.event.addListener(map, 'click', function() {
closeNav()
});
}
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="Fixed">
<div id="Fixed_img_c">
</div>
</div>
<div class="container">
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">Something</a>
<a href="#">Something</a>
</div>
<div id="map" style="width:100%;height:500px"></div>
<div id="Footer">
<p id="Footer_text" class="paragraphs">dufault</p>
</div>
Upvotes: 7
Reputation: 133400
Try placing the listener in a function and pass the value you need
var myFunctinForListener = function(aMarker, aInfoWindow) {
google.maps.event.addListener(aMarker, 'click', function() {
openNav();
//changeText();
aInfoWindow.open(map, aMarker);
});
}
....
for (var i = 0; i < locations.length; i++) {
var coords = locations[i];
var latLng = new google.maps.LatLng(coords[0], coords[1]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
label: info[i][0],
title: info[i][0]
});
var infowindow = new google.maps.InfoWindow({
content: info[i][1] + ""
});
myFunctinForListener(marker, inforwinodow);
.....
Upvotes: 2