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);
}
Related
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.
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.
I have requirement of displaying an address on a click of a button, for which i got the latitude and longitude of the desired location,
while mapping in URl
https://maps.google.com/?ll=28.64036031970850,77.24250191970849
like this. I don't get the desire pointer on google map Like which we get A in red pointer.
Thanks for any assistance.
Try this. Change the lat/long as per your need.
https://maps.google.com/?q=22.917923,72.773438
You can use custom markers for this. Here is a snippet to get you started:
// Create the map
var map = new google.maps.Map($("#map-result"), mapOptions);
// Create the marker on the map
var marker = new CustomMarker(new google.maps.LatLng(pinLatitude, pinLongitude), map, searchResults[i], markerNumber);
// Add listener to react to click of marker
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
// Call some function to do something
showSelectedMarker();
}
})(marker, i));
A very good example is here:
Google Maps JS API v3 - Simple Multiple Marker Example
My site consists of a Leaflet map with the leaflet.markerclusters plugin. I am also using Flowplayer to play a video that opens in a JQuery Tools overlay using the selector id "#video1".
Currently, when I click on any marker on the map it fires my test video in an overlay. My goal is to create a click event unique to each individual marker in the cluster. Eventually, I would like every marker to have a click event that fires a video unique to that marker.
I am a beginner, and have been doing okay using these well documented libraries up until now. However, I don't have the skills to bridge this current gap. Would someone please give me a push in the right direction? Below is a link to my JS Fiddle. My issue begins on JavaScript line 2098.
var markers = new L.MarkerClusterGroup();
var addressPoints = [
[40.634902, -73.965054, "Video1"],
[40.660897, -73.961082, "Video2"],
[40.693353, -73.970413, "Video3"],
[40.693289, -73.966289, "Video4"],
[40.68973, -73.971007, "Video5"],
[40.718423, -73.957428, "Video6"],
[40.71817, -73.956918, "Video7"],
[40.681427, -73.993959, "Video8"]
];
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = new L.Marker(new L.LatLng(a[0], a[1]), {
title: title
});
marker.bindPopup(title);
markers.addLayer(marker);
}
map.addLayer(markers);
//assign video div ID to overlay
$('#video1').overlay({
load: false,
top: "center",
left: "center"
});
//bind marker click event to overylay
markers.on('click', function () {
$("#video1").data("overlay").load();
});
Thank you,
Joey
http://jsfiddle.net/Joey84/nM458/26/
You are headed in the right direction with the markers.on("click"... function. You just need to make a few edits. Just as you added the event listener to the entire "markers" layer, you can add it to individual markers in your for loop.
...
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = new L.Marker(new L.LatLng(a[0], a[1]), {
title: title
});
if (title=="Video1") {
marker.on('click', function () {
$("#video1").data("overlay").load();
});
}
marker.bindPopup(title);
markers.addLayer(marker);
}
...
Likewise - and probably the better solution - you can access details about the marker you clicked in the on("click"... you are currently using by passing a variable to the function. This would be useful if you have multiple videos and don't want to check with an if statement when creating markers.
markers.on('click', function (d) {
// Grab marker title and make it look like an ID
var marker_title = "#" + d.layer.options.title.toLowerCase();
// Make sure the jQuery object exists
if ( $(marker_title) ){
// Call up the video.
$(marker_title).data("overlay").load();
}
});
Note that I used toLowerCase() because your data has the title capitalized and the video id is all lowercase.
Here it is in action:
http://jsfiddle.net/nM458/44/
I have found the function below which creates only one marker - which is what I want.
But how do I change the marker options e.g. html - without creating a new one?
i.e. the code below will move an existing marker using setPosition but what if I also want its html and title changed....
var marker;
function placeMarker(location) {
if ( marker ) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
map: map
});
}
}
The html is the content of the infoWindow bound to the marker's 'click' event. There is an infoWindow.setContent() method. I would extend the marker to hold the html content when you create it, then update it where you reset the position, title, etc. Then you need to write you own 'click' event handler to use something against a single global infoWindow.
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(marker.html);
infowindow.open(map,marker);
});
the properties of the marker object mostly have corresponding get and set methods, as detailed in the documentation
For example, Title has a get_Title() method and a set_Title() method, which you can use like this...
myMarker.setTitle('my new title');
Maker is a MVCObject and this class have the set method
marker.set(property, New_Value);
If you want to change more than one property, you can use setOptions method