I have the following function. geolocationService.getNearbyPeoples() is a service that
fetch data from db.
function nearbyPeoples(meLat, meLng, map){
geolocationService.getNearbyPeoples(meLat, meLng).then(function(response){
for (var i = 0; i < response.data.length; i++) {
var nearbyLatLng = new google.maps.LatLng(response.data[i].lat, response.data[i].lng);
var nearbyMarkers = new google.maps.Marker({
position: nearbyLatLng,
title: response.data[i].first_name
}).setMap(map);
};
});
}
then when dragend a center marker (meMarker) will call the function above to show nearby markers
google.maps.event.addListener(meMarker, 'dragend', function() {
nearbyPeoples(meMarker.position.lat(), meMarker.position.lng(), map);
});
then I want to remove the previous markers in dragstart. The reason is to prevent duplicated
markers if meMarker is dragend same location.
google.maps.event.addListener(meMarker, 'dragstart', function() {
});
But I have no idea how to remove or any better suggestions?
Instead of removing markers, why not keep a list (object) of markers as they are added and use it to avoid duplicating a marker? And/or use it to remove markers outside the bounds of the map view, if you must remove markers.
Related
Is there any way to get the right click event on a parsed KML layer using geoxml3 on google map.I am getting the right click event of map ie outer region of KML. But i am not able to get the click event on the parsed KML.
I have used like this
var geoXml = new geoXML3.parser({
map: map
});
geoXml.parse('file.kml');
geoxml3 parses the KML to native Google Maps Javascript API v3 objects. To add a right click events to them, you need to either add custom createMarker, createPolyline, createPolygon functions that add the right click listeners as the objects are created or process the results and add the listeners to the output.
The following was helpful and got the latitude and longitude when right clicked on a KML layer in google map
var geoXml = new geoXML3.parser({
map: map,
afterParse: function (doc) {
for (var i = 0; i < doc[0].placemarks.length; i++) {
var p = doc[0].placemarks[i];
clickablePolygon(p);
}
}
});
geoXml.parse(parameter.FileName);
function clickablePolygon(p) {
google.maps.event.addListener(
p.polygon,
"rightclick",
function (event) {
var clickedLocation = event.latLng;
var latlng = {
lat: clickedLocation.lat(),
lng: clickedLocation.lng(),
zlevel: map.getZoom()
};
}
);
}
I need to know about to get google map points location in Meteor JS.For example in my map showing 10 pointers based on location latitude and longitude.When ever click a marker then shows location based on that pointer in a new window(or popup).
I didn't get any idea about this.So please suggest me what to do for this?
Thanks in advance.
What you need here its an InfoWindow, wich have the content option.
So lets say you have this simple initialize function
initializeMap = function() {
//Common code to init the map.
//common code to create dynamic markers already give you an answer here
//https://stackoverflow.com/questions/28424854/how-can-i-create-multiple-markers-on-a-google-map
//now on the same function lets add this code
function createMarkers(){
for(var i = 0 ; i <latLong.length ; i++) {
//lati and long are declared as global variables.
lati = latLong[i].lat;
longi = latLong[i].long;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lati, longi),
map: map,
icon: 'http://Yourimagesourcehere'
});
//and this is how you call it.
myInfoWindow(marker2,map,lati,long);
}
//Function to created infoWindows.
function myInfoWindow(marker2,map,lati,long){
google.maps.event.addListener(marker2, 'mouseover', function() {
for(var i=0;i<markerArray.length;i++){
infoWindow.setContent( 'My lat is ' + lati + "my long is " + longi );
infoWindow.open(map, marker2);
}});
google.maps.event.addListener(marker2, 'mouseout', function() {
infoWindow.close();
}
}
}
So like you see based on the other question How can i create multiple markers on a google map, in this example we added the new function named myInfoWindow with 4 parameters, the marker,the map, and the 2 variables for the content (in this case late,long)
If you have doubts about how to init the map or how the code should look i have this DEMO and here is the Source Code, just add the infoWindow function inside the createMarkers function and it should work.
Tell me if Works.
Here's the problem:
I want to remove all map markers from the map when they go out of the viewport. I have the code that checks for their position, then runs setMap(null) on the marker. The marker disappears. I then set the marker itself to null to destroy it, per the Google Maps documentation.
The problem is that jquery-maps-ui's function for retrieving the map markers still includes the deleted markers!
function cleanUpMarkers(map) {
console.log("$('#map_canvas').gmap('get', 'markers').length = " + $('#map_canvas').gmap('get', 'markers').length);
$.each($('#map_canvas').gmap('get', 'markers'), function (i, marker) {
if (!map.getBounds().contains(marker.getPosition())) {
console.log(marker.internalId);
marker.setMap(null);
marker = null;
delete marker;
//console.log(marker.internalId);
}
});
console.log("$('#map_canvas').gmap('get', 'markers').length = " + $('#map_canvas').gmap('get', 'markers').length);
}
How can I truly delete the marker so that $('#map_canvas').gmap('get', 'markers') doesn't return the deleted markers?
In my application using Google maps APIv3, I am trying to randomly generate some markers attached with a polyline. I have done the following:
//Loop to add locations and draw line
var path= polyline.getPath();
for(var i=0;i<route.length;i++) //route is an array containing some latlng's
{
var marker= new google.maps.Marker({position:route[i],map:map});
path.push(route[i]);
}
//Event Listener's
google.maps.event.addListener(marker,'click',function(event)
{
iwindow.setContent("<b>Coordinates are:</b><br/>Latitude:"+event.latLng.lat()+"<br/>Longitude:"+event.latLng.lng());
//iwindow is the InfoWindow variable
iwindow.open(map,marker);
});
The issue here is that the marker on click always has the marker reference of the last marker in the for loop. So only the final marker displays the infowindow.
How do I change my code so that every marker click generates an InfoWindow?
The callback is the same for each marker, so it's fine to define that outside the scope of the loop. But a separate listener needs to be attached to each marker, so put that code inside the loop.
function showPopup(event) {
iwindow.setContent("<b>Coordinates are:</b><br/>Latitude:"+event.latLng.lat()+"<br/>Longitude:"+event.latLng.lng());
iwindow.open(map,marker);
});
for(var i=0;i<route.length;i++) {
var marker= new google.maps.Marker({position:route[i],map:map});
path.push(route[i]);
google.maps.event.addListener(marker,'click',showPopup);
}
Does any one have a clue how to add an info windows to the cluster markers, containing the merged markers info window content?
This is an of the default marker clusterer behaviour:
http://www.psop.fr/MAP_Population_Google.php
thanks
You should listen to the clusterclick event on the markercluster. The object that is passed into the event contains an array of markers that are in the cluster and the position of the cluster.
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
markers = cluster.getMarkers();
info = "";
$.each(markers, function(x, marker) {
if(me.infowindows[marker.__gm_id]){
info = info + "<br/>" + me.infowindows[marker.__gm_id].content;
}
});
.....
something like that works, you get the markers associated with the clusterclick. and then loop through the infowindows, i'm not sure how yours is set up. but the above code should make sense.
you also need to disable the zoom on click as the clusters get re-drawn for each zoom.
var contentString = 'This is an example';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});