I want to get the element let say marker when it is clicked. Mouse click event not send any object of sender.
I know this can be achieved via :
var locMarker = new google.maps.Marker({
map : map,
icon : icon,
position : point
});
locMarker.id = (i + 1);
locMarker.clubID = clubid;
locMarker.clubName = clubname;
google.maps.event.addListener(locMarker, 'click', function(evt) {
console.log(evt);
console.log(locMarker);
});
But this way I can only get evt, not the whole marker object, here i can access marker object, but if i declare click event function somewhere else like this :
google.maps.event.addListener(locMarker, 'click', this.locationMarkerOnClick);
then i only get evt, not markerObject. Is there any solution?
Use the keyword this:
(function() {
var locMarker = new google.maps.Marker({
map: map,
icon: icon,
position: point
});
locMarker.id = (i + 1);
locMarker.clubID = clubid;
locMarker.clubName = clubname;
google.maps.event.addListener(locMarker, 'click', this.locationMarkerOnClick);
})();
function locationMarkerOnClick(evt) {
console.log(this); // get (show in console) the marker itself
console.log(evt); // show the evt as expected
}
Related
I'm having an issue drawing a dynamic polygon using ngmap. Basically I have a map with an on-click event as follows
<map center="<% latitude %>, <% longitude %>" zoom="2" on-click="placeMarker()">
and the "placeMarker" method is inside my controller. Now, the following code will correctly place markers on the map and turn them into a polygon the moment you place the 4th marker...
$scope.placeMarker = function(e)
{
var marker = new google.maps.Marker({position: e.latLng, map: $scope.map});
$scope.coordinates.push( [Number(e.latLng.J),Number(e.latLng.M)] );
if( $scope.coordinates.length == 4 )
{
$scope.createPolygon();
}
}
$scope.createPolygon = function()
{
$scope.GoogleMap.polygons.push( $scope.coordinates );
$scope.coordinates = [];
}
... but when I try to refactor the code to build the polygon when the user clicks back onto the first marker they placed nothing happens. The event listener fires, the logic appears OK but the polygon never appears
$scope.placeMarker = function(e)
{
var marker = new google.maps.Marker({position: e.latLng, map: $scope.map});
$scope.coordinates.push( [Number(e.latLng.J),Number(e.latLng.M)] );
if( $scope.coordinates.length == 1 )
{
google.maps.event.addListener(marker, 'click', function () {
$scope.createPolygon();
});
}
}
$scope.createPolygon = function()
{
$scope.GoogleMap.polygons.push( $scope.coordinates );
$scope.coordinates = [];
}
I'm sure this is probably a limitation in my generic JS knowledge. It has me stumped. Can anybody please advise?
I want to add a bootstrap tooltip to google map marker.
I cannot add HTML 5 atributes to it. So i tried to find the ID or class of the marker and adding the tooltip via javascript.
But, when I try to inspect the marker element using chrome tools the right click does not work inside the map canvas.
How should I go forward with it? Can I assign a custom ID to my google map marker.?? Or any other possible way?
My Code:
google.maps.event.addListener(map, 'click', function (event) {
if (POIMarker) {
POIMarker.setMap(null);
}
POIMarker = new google.maps.Marker({
position: event.latLng,
title: 'Double-Click me to feed information about this place',
icon: 'Images/POIMarker.png'
});
POIMarker.setMap(map);
google.maps.event.clearListeners(POIMarker, 'dblclick');
google.maps.event.addListener(POIMarker, 'dblclick', function (event) {
$('#POIModal').modal('show');
});
});
Here's a really hacked way of doing it, which tracks the mouse position and then positions a Bootstrap tooltip where the mouse is when the google map event is triggered. You could modify it to show the modal instead of a tooltip or use the click event instead of mouseover/out, as needed.
See http://jsfiddle.net/6o33fx6L/
var mouse = {
x: 0,
y: 0
};
document.addEventListener('mousemove', function (e) {
mouse.x = e.clientX || e.pageX;
mouse.y = e.clientY || e.pageY
}, false);
google.maps.event.addListener(marker, 'mouseover', function (event) {
$("#tt").css("left", mouse.x + "px").css("top", (mouse.y - 20) + "px").tooltip('show');
});
google.maps.event.addListener(marker, 'mouseout', function (event) {
$("#tt").tooltip('hide');
});
This version swaps in the marker's title for the tooltip:
http://jsfiddle.net/6o33fx6L/1/
You can asign more fields to the marker with this little snippet
marker.set("id", YOURVALUE);
I'd place this code in your function where you create your markers, because it will be called most likely within a for loop. So maybe you could just do something like
for(i = 0; i < markers.length; ++i)
{
// create marker
marker.set("id", i);
//set marker to map
}
Access is easy, just do
marker.get('id');
This should do what you need do clearly identify certain markers
i have a function that i can give coordinate into input by click on map.
i want to can get two coordinate of two point on map for get direction between them by two click on map.
how can i do this?
var pointa;
var pointb;
google.maps.event.addListener(map,'click',function(event){
var point=new google.maps.LatLng(event.latLng.lat(),event.latLng.lng());
document.path.lat1.value=event.latLng.lat();
document.path.lon1.value=event.latLng.lng();
pointa=new google.maps.Marker({
map: map,
position: point,
icon:'http://google.com/mapfiles/kml/paddle/A.png ',
draggable:true
});
});
You're already creating a marker when they click. You can readily tell when they click a second time by looking at pointa. pointa will have the value undefined to start with. That value is "falsey," but when you store a Google Maps Marker reference in pointa it's no longer falsey. So you can use "if (!pointa)" to know that you're dealing with the first click:
var pointa;
var pointb;
google.maps.event.addListener(map, 'click', function (event) {
var point = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
document.path.lat1.value = event.latLng.lat();
document.path.lon1.value = event.latLng.lng();
if (!pointa) {
// This is the first click
pointa = new google.maps.Marker({
map: map,
position: point,
icon: 'http://google.com/mapfiles/kml/paddle/A.png ',
draggable: true
});
}
else {
// This is a subsequent click (the second, third, etc.)
}
});
We have a dynamic json feed that is parsed into markers on our google map.
the parsing function looks something like this:
function parse_json(json) {
// alert('start parse: '+json.length);
if (json.length > 0) {
var markers = [];
for (i=0; i<json.length; i++) {
var report = json[i];
//alert(report.longitude +','+report.latitude);
// addLocation(report);
markers[i] = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(report.latitude, report.longitude),
pop_title: report.area1.name,
pop_body: '<b>'+ report.spot.name +'</b>'+
'<br>'+ report.report_description,
draggable: false,
title: 'title',
zIndex: i,
icon: '/images/map_icon.png'
});
markers[i].metadata = {type: "point", id: report.id};
google.maps.event.addListener(markers[i], 'click', onMarkerClick);
}
};
i have added metadata info to the markers created so their id is the report.id - but i want to use the google.maps.event.trigger(SOMETHING_HERE, 'click'); construct to trigger a click event on a given marker when a button outside of the map is pressed. how do i get the object name, or is there a way to do this using the object's id?
thanks!
If you declare your markers array at a higher scope than your parse_json function, then you will be able to refer to it later, something like this:
var markers = new Array();
function parse_json(json) {
//code removed for brevity
}
Then later, when you need to find the marker you want to fire a click event against, you could use the id like this:
for ( var i = 0; i < markers.length; i++ ) {
var mkr = markers[i];
if ( mkr.metadata.id === idYouAreSearchingFor ) {
//do whatever is needed here and fire your event
}
}
In the code available here :
https://gist.github.com/1338861
if I would include the code of the function function attachEvent(marker){...}
into the body of the function
function addResults(json) {...}
like this :
function addResults(json) {
if (json.results && json.results.length) {
for (var i = 0, placemark; placemark = json.results[i]; i++) {
var pos = new google.maps.LatLng(parseFloat(placemark.point.latitude, 10),
parseFloat(placemark.point.longitude, 10));
var marker = new google.maps.Marker({
map: map,
title : placemark.name,
position: pos
});
google.maps.event.addListener(marker, 'click', function(){
var text = marker.getTitle();
showInContentWindow(text);
profileMarkers.push(marker);
}
}
}
the result would be that when clicking on any marker from the map, it would be shown in the content window only the information characteristic to the last marker added to profileMarkers array (instead of the information of the marker clicked).
My question is why does the onclick listener for the marker need to be attached in a different function (attachEvent in this context) ?
Because you keep changing marker to the last one by continuing the loop. Try this:
(function(mkr) {
google.maps.event.addListener(marker, 'click', function(){
var text = mkr.getTitle();
showInContentWindow(text);
profileMarkers.push(mkr);
}
})(marker);
In the place of the current google.maps.event.addListener code. This will create a closure and effectively "fix" the value of the variable.