I'm having difficulty setting event handlers to Google Maps markers in JavaScript. Below is my code:
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 8,
center: {lat: -35, lng: 149}
});
for (var i = 0; i < basketballCourts.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(basketballCourts[i].latitude, basketballCourts[i].longitude),
map: map,
title: 'Hello World!'
});
marker.set("data-index", i);
google.maps.event.addListener(marker, 'click', function() {
console.log(marker.get("data-index"));
});
}
You'll notice that there is a click event for the markers. However, the click event is the same for all the markers. A different number should be logged for every marker click, but no matter what marker I click on, I get the same response.
I'm not sure how to fix this.
What's happening is you're looping over all your basketballCourts, creating an event listener for each marker. That's all well and good. However that event listener function looks like:
console.log(marker.get("data-index"));
The function executes in response to a marker click, not when you define it. And the value of marker when the function executes will be the value it had at the end of your loop over all the basketballCourts.
Using #MiltoxBeyond's suggestion, try using this.get("data-index")
Related
This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 8 years ago.
Problem with the following code is that the click event is not fired. The markers appear on the map as expected, but when clicked, nothing appears in the console. I've been searching for a while now, but all the answers I find are not relevant to my code.
/*
* Connect to Google API, load map and markers
*/
function drawMarkers(markerInfo) {
var mapOptions = {
center: { lat: 50.601079, lng: 4.4764595},
zoom: 8,
scrollwheel: false,
styles: style
};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
for (var i = 0; i < markerInfo.length; i++) {
var Latlng = new google.maps.LatLng(markerInfo[i][0],markerInfo[i][1]);
var title = markerInfo[i][2];
var marker = new google.maps.Marker({
position: Latlng,
animation: google.maps.Animation.DROP,
map: map,
title:title,
icon: markerUrl
});
};
google.maps.event.addListener(marker, 'click', function() {
console.log('test');
});
};
google.maps.event.addDomListener(window, 'load', getmarkerInfo);
I've got no idea what the problem could be, because there are no errors, and I can't seem to find the problem...
EDIT: When I refresh the page and I zoom out, so a marker which wasn't visible yet get's loaded in, only that one responds to the click event.
You only add the listener to the last marker, attach the listener in the loop and you'll be attaching the event to each marker.
for (var i = 0; i < markerInfo.length; i++) {
var Latlng = new google.maps.LatLng(markerInfo[i][0],markerInfo[i][1]);
var title = markerInfo[i][2];
var marker = new google.maps.Marker({
position: Latlng,
animation: google.maps.Animation.DROP,
map: map,
title:title,
icon: markerUrl
});
google.maps.event.addListener(marker, 'click', function() {
console.log('test');
});
};
You should probably create a function , which accepts marker as the argument , and call the function from within the for loop itself passing the current marker as the parameter.
function addListner(marker)
{
google.maps.event.addListener(marker, 'click', function() {
console.log('test');
});
}
And call the function inside the loop.
While referring to marker outside the for loop there is no reference to which marker it referring to. You need to assign a listener to each marker individually.
Although somehow, there are several questions related to my question, this is why my question is different. Using Phonegap, I have an index.html and gmap.html. On my index.html, my href contains parameters :
example: gmap.html?&name=Agustina%20Apartments&lat=14.625486&lng=121.02333099999998
I was able to parse the parameters and put a marker on the map. However, I want to assign an onclick on the marker. I have this code:
google.maps.event.addListener(marker, 'click', callNumber('84'));
Now, what I am trying to do is when the user clicks on the marker, the accompanied contact_number will be opened on the phones's dialer so the user can call the establishment. I have a code that setups a marker using the coordinates from the url. I tried to put it inside my onSuccess callback of my navigator.geolocation.watchPosition method with timeout of 5 seconds. What happens is every 5 seconds, the dialer will appear with the phone number (because of the timeout). However, when I click on the marker, nothing happens. I tried to put it in my initialize() function, but it showed dialer before showing the map, and the marker not being able to detect click events.
Here is a more detailed code:
function initialize() {
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(14.6333, 121.0333)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var estabCenter = new google.maps.LatLng(lat,lng);
var estabMarker = new google.maps.Marker({
map: map,
position: estabCenter
});
var estabCircle = new google.maps.Circle({
map: map,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
center: estabCenter
});
estabCircle.setRadius(100);
google.maps.event.addListener(estabMarker, 'click', callNumber('84'));
// Try HTML5 geolocation
if(navigator.geolocation) {
mapAutoUpdate();
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function callNumber(number){
window.open('tel:'+number+'', '_system');
}
Thank you for those who will help me.
Supply a function as callback, not a function-call(except the call returns another function):
google.maps.event.addListener(estabMarker, 'click', function(){callNumber('84');});
In this jsfiddle is simplified version of my js: http://jsfiddle.net/Drecker/2m4kvxb8/4/ Note that interesting part of the jsfiddle is only showRoute method. And method showMarker only shows desired behavior on normal marker.
Basically I generate a route via gmap3 getroute with some waypoints. After clicking on a waypoint I need to open a small infobox with more custom information of that point - so basically somehow get onclick event of such waypoint (with some identification of that waypoint so I would be able to get proper information). I'm able to achieve desired behavior on a separate marker (as you can see in the jsfiddle - that's the fully functional separate marker on the top left), but not on the markers generated by directionrenderer.
Furthermore please note that my waypoints have stopover: false and such markers for some reason ignore (some) options like title, as you can see in jsfiddle.
Any help is very appreciated - I've tried several things none of them works.
Hope you are using the google APIs library some version, in case something like this
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places,geometry" type="text/javascript"></script>
You have one div space to show the map, say
<div id="map" style="width: 700px; height: 600px;"></div>
So you can use this for adding listener on markers
//location is an array variable where you store your co ordinates
//code to show map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(locations[0].latitude, locations[0].longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//adding listener
var marker,i;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i].city);
infowindow.open(map, marker);
}
})(marker, i));
where
marker
is the varible which will be something like this,
//adding marker
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i].latitude, locations[i].longitude),
map: map
});
Hope from above you got some idea, might be helpful for you with your problem
There is no such option, according to the documentation and a lot of similar questions here on the stackoverflow, you can't bind click action to waypoints.
I have a workaround for that problem. The main idea is to add markers instead of waypoints and change their icon. Marker has much more options than waypoint. So I removed waypoints and added markers. Note that you have to be much more precise when adding marker's location
options without waypoints:
options: {origin: {lat:49.9, lng: 14.9},
destination: {lat: 50.1, lng: 15.1},
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
added markers with a new icon and click event:
marker:{
values:[
{latLng:[49.96485, 14.88392], data:"Waypoint1", options:{icon: "http://mt.google.com/vt/icon/name=icons/spotlight/directions_transfer_icon_10px.png&scale=1"}},
{latLng:[49.97730, 14.88185], data:"Waypoint2", options:{icon: "http://mt.google.com/vt/icon/name=icons/spotlight/directions_transfer_icon_10px.png&scale=1"}}
],
options:{
draggable: false
},
events:{
click: function(marker, event, context){
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.open(map, marker);
infowindow.setContent(context.data);
} else {
$(this).gmap3({
infowindow:{
anchor:marker,
options:{content: context.data}
}
});
}
}
}
}
Here is my workaround for that problem : DEMO
Hi I am showing some markers on my google map and on click of the marker, I am calling the click event and showing some info about that place to the right side(area other than Map and not as an infoWindow). Now this event gets fired on click, and by default when page loads my div remains blank, How can I have the div the basic information being shown up once the map loads up. I need to show the information that corresponds to the marker that is the center point of the map, and later when the users click the marker icons the info should change and correspond to the particular marker being clicked
I have tried something but it doesn't work:
function loadMap() {
var myLatlng = new google.maps.LatLng(40.46998, -3.68705);
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var places = [];
places.push(new google.maps.LatLng(51.43581, -0.51744));
places.push(new google.maps.LatLng(48.87187, 2.31764));
places.push(new google.maps.LatLng(45.45979, 9.19681));
var infowindow;
for(var i = 0; i<places.length; i++) {
var marker= new google.maps.Marker({
position: places[i],
map: map,
title: 'Place' + i
});
(function (i,marker){
google.maps.event.addListener(marker, 'click' , function() {
infowindow.setContent('PLace Number' + i)
infowindow.open(i, marker)
});
});(i, marker);
}
}
$("document").ready(function () {
loadMap();
});
UPDATE EDITED
Basically I need something like Layer KML features
But the info should come on the right hand side by default for the first time. Later on when the marker is clicked, the info should change. I am also not adamant that I need this info in a kml file(xml is fine with me as well). I can just have a marker and info should popup on click and for the first time be default as well depending on the location of the user.
Bottom Line: I need the info to appear on click of a marker and by default when the page loads the info should appear corresponding to the center point of the map. which means users coming from different locations will see different info's corresponding to their location from where they are coming.(I am centering the map based on users location)
You can use the addDomListener event of the google maps api. Something like this:
<script>
function initialize() {
// Map initialization
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map_canvas"></div>
</body>
Although the above code is Maps Javascript API code, the addDomListener() method binds to the window object of the browser and allows the API to communicate with objects outside of the API's normal domain.
further reading
Actually the basic Idea is that you need to read an XMl and parse the data and and show this in a seperate div on right side., This div you can create dynamically when you load the map e-g:
$("#body").append("<div class='newdiv'></div>")
From the google Docs in the section about InfoWindow:
Note that if you call open() without passing a marker, the InfoWindow
will use the position specified upon construction through the
InfoWindow options object.
So in your code, why don't you simply init your infoWindow and call the open() method? I am not particularly familiar with the api, but how about:
var infowindow = new google.maps.InfoWindow({
content: 'your initial text'
});
infowindow.open();
Or if you need the marker for special purposes on the infowindow, init an marker with the center position and use that in the infowindow.open(your_initial_pos) call.
You can use jQuery to .triger() a click event on the first marker on document.ready:
$(marker).trigger('click');
This will run the code you have already written and make it so when the page loads your div will be populated with data from whatever element you trigger the click on.
When you bind to document.ready you don't need encapsulate document in quotes:
$(document).ready(function () {...});
Or you could use the short-hand if you're into that sort of thing:
$(function () {...});
UPDATE
You can place the trigger function call after your for loop where you are setting up the markers:
for(var i = 0; i<places.length; i++) {
var marker= new google.maps.Marker({
position: places[i],
map: map,
title: 'Place' + i
});
(function (i,marker){
google.maps.event.addListener(marker, 'click' , function() {
infowindow.setContent('PLace Number' + i)
infowindow.open(i, marker)
});
});(i, marker);
//only run on the first marker
if (i === 0) {
//trigger a click event to show the first info-window
$(marker).trigger('click');
}
}
You can fire a tilesloaded event on the map object. Check out the Map reference for events
tilesloaded waits until the map tiles are actually loaded before firing. Using your code, you could do something like this:
function loadMap() {
var myLatlng = new google.maps.LatLng(40.46998, -3.68705);
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
google.maps.event.addListener(map, 'tilesloaded', function() {
doSomething();
});
I'm playing around with Google maps for the first time, so I looked at a nice tutorial over at CSS Tricks: http://css-tricks.com/google-maps-slider/ I like working with jQuery better than pure JS, and this tutorial makes a nice way to click on a place in a list to display the marker in the map.
I liked it that way, but I need to add infowindows to the marker. Which I did, but when I click on a place on the list and the map pans away, the infowindow stays open! I think it's because I need to attach the infowindow.close() to the event of clicking on a "#locations li".
Here's my code, which runs on document.ready:
$(function() {
var chicago = new google.maps.LatLng(41.924832, -87.697456),
pointToMoveTo,
first = true,
curMarker = new google.maps.Marker({}),
$el;
var myOptions = {
zoom: 10,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas")[0], myOptions);
$("#locations li").click(function() {
$el = $(this);
if (!$el.hasClass("hover")) {
$("#locations li").removeClass("hover");
$el.addClass("hover");
if (!first) {
// Clear current marker
curMarker.setMap();
// Set zoom back to Chicago level
// map.setZoom(10);
}
// Move (pan) map to new location
function move(){
pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
map.panTo(pointToMoveTo);
}
move();
// Add new marker
curMarker = new google.maps.Marker({
position: pointToMoveTo,
map: map
});
// Infowindow: contenido
var contentString = '<p>'+$el.find("h3").html()+'</p>';
contentString += 'hola' ;
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50),
content: contentString
});
// On click, zoom map
google.maps.event.addListener(curMarker, 'click', function() {
//map.setZoom(14);
infowindow.open(map,curMarker);
});
It looks like you're creating a new InfoWindow for each marker. Quoting from the Google Maps API Docs:
If you only want one info window to display at a time (as is the behavior on Google Maps), you need only create one info window, which you can reassign to different locations or markers upon map events (such as user clicks).
Therefore, you may simply want to create one InfoWindow object just after you initialize your map, and then handle the click event handler as follows:
google.maps.event.addListener(curMarker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, curMarker);
});
Then the InfoWindow should automatically close when you click on a new marker without having to call the close() method.