in the following code generated an undetermined number of markers, this works well.
for(i=0;i<idr.length;i++){
var LatLng = new google.maps.LatLng(lat[i], lng[i]);
m[i] = new google.maps.Marker({
position: LatLng,
icon: image,
map: map,
draggable: false,
val: idr[i]
});
}
I want to get the properties of the corresponding marker when the mouse passes over this
This does not apply for you should create a function for each marker and can not be that many
This function only access the first marker
google.maps.event.addListener(m[0], "click", function(e) {
var latitud = e.latLng.lat();
alert(latitud);
});
use this inside the callback to get access to the current marker(m[i] will not work there, because it will always refer to the last created marker)
google.maps.event.addListener(m[i], 'mouseover', function() {
alert(this.val)
});
for(i=0;i<idr.length;i++){
var LatLng = new google.maps.LatLng(lat[i], lng[i]);
m[i] = new google.maps.Marker({
position: LatLng,
icon: image,
map: map,
draggable: false,
val: idr[i]
});
google.maps.event.addListener(m[i], 'mouseover', function() {
//Do stuff
});
}
The above is how I would do it.
Related
I am trying to activate the infowindow for a custom marer, yielding a small description about the marker, I'm having some trouble at the moment, I have the custom marker working but I can't get the infowindow to show.
I tried calling the listener for the marker and storing it in a variable "customMarker", then calling another mouseover listener to activate the infowindow, but I'm having no luck, can anyone help me out?
var map;
//Creates a custom icon to be placed on the map
var goldStar = 'https://cdn2.iconfinder.com/data/icons/august/PNG/Star%20Gold.png';
function initialize() {
//Sets the zoom amount for the map, the higher the number, the closer the zoom amount
var mapOptions = {
zoom: 18
//center : myLatLng
};
//The map object itself
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var contentString = 'This is a custom toolTip';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
// Tries to find user location using HTML 5
if(navigator.geolocation)
{
//sets the map to the position of the user using location
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
var customMarker = google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng, map);
});
//This listener is not working
//google.maps.event.addListener(customMarker, 'mouseover', function() {
//infowindow.open(map,customMarker);
//});
}
function placeMarker(location, map)
{
var marker = new google.maps.Marker({
position: location,
icon: goldStar,
map: map,
title: "custom marker",
draggable:true
});
map.panTo(location);
}
The google.maps.event.addListener function does not return a marker. This won't work:
var customMarker = google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng, map);
});
Assign the event listener in your placeMarker function to the marker you create (also gives the advantage of maintaining function closure on the marker):
function placeMarker(location, map) {
var marker = new google.maps.Marker({
position: location,
icon: goldStar,
map: map,
title: "custom marker",
draggable: true
});
var contentString = 'This is a custom toolTip';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map,marker);
});
map.panTo(location);
}
working fiddle
I'm having an issue with with combining marker manager and maplabel using google maps API.
When I bind a label to a marker's map and position everything works as expected. When I move the marker the label moves, and when I remove the marker from the map, the label is also removed. The issue happens when I add the marker to marker manger. It appears that all bindings are broken so my label no longer moves with the marker and the label stays on the map after the marker is removed.
Here's a JS fiddle showing the issue: http://jsfiddle.net/d6Su5/
You will see the first marker (not in the manager) can be moved with its label but the second marker leaves the label behind.
Code:
var map;
var mgr;
var elevator;
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(46.87916, -3.32910),
mapTypeId: 'terrain'
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
mgr = new MarkerManager(map);
var marker = new google.maps.Marker({
title: 'No manager',
position: new google.maps.LatLng(46.87916, -3.32910),
map: map,
draggable: true
});
var mapLabel = new MapLabel({
text: 'No manager'
});
mapLabel.bindTo('position', marker);
mapLabel.bindTo('map', marker);
var marker2 = new google.maps.Marker({
title: 'With manager',
position: new google.maps.LatLng(44.87916, -3.32910),
map: map,
draggable: true
});
var mapLabel2 = new MapLabel({
text: 'With manager'
});
mapLabel2.bindTo('map', marker2);
mapLabel2.bindTo('position', marker2);
google.maps.event.addListenerOnce(map, 'idle', function() {
mgr.addMarker(marker2, 1);
});
What am I missing?
I found the solution. The position should be set on the label instead of the marker, and then the marker should be bound to the label, not the other way around. Also, the map is set by the marker manager when the marker is loaded. Here's an updated jsfiddle: http://jsfiddle.net/d6Su5/2
var marker2 = new google.maps.Marker({
title: 'With manager',
draggable: true
});
var mapLabel2 = new MapLabel({
position: new google.maps.LatLng(44.87916, -3.32910),
text: 'With manager'
});
marker2.bindTo('map', mapLabel2);
marker2.bindTo('position', mapLabel2);
google.maps.event.addListenerOnce(map, 'idle', function() {
mgr.addMarker(marker2, 2);
});
Hopefully this helps someone in the future!
The code is very straight-forward as follows:
var populateGoogleMap = function (points) {
for (i = points.length - 1; i >= 0; i--) {
var marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(point.target.x, point.target.y)
});
google.maps.event.addListener(marker, 'click', function (e) {
toggleBounce(marker);
});
nodes[i].marker = marker;
}
};
It turns out that the marker in toggleBounce(marker) is ALWAYS the last marker that gets created. I considered this problem for a bit, and found a solution by modifying the function. I removed the loop in the function, and use a loop elsewhere to call this function multiple times. So basically now it becomes for (i = 0; i < points.length; i++) { populateGoogleMap(point); }.
Is this behavior intended by Google Maps API? I think this can be confusing to many people, since the variable should refer to the one in the current context.
This isn't something unique to Google Maps. You've creating an event listener function X times:
google.maps.event.addListener(marker, 'click', function (e) {
toggleBounce(marker);
});
When you've finished your loop, the value of marker is the very last one created in the loop. All you've really done is re-define the marker click event listener, X times.
Another way to explain it. Imagine you didn't have a loop, but you were creating multiple markers, like this:
var marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(point.target.x, point.target.y)
});
google.maps.event.addListener(marker, 'click', function (e) {
toggleBounce(marker);
});
var marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(point.target.x, point.target.y)
});
google.maps.event.addListener(marker, 'click', function (e) {
toggleBounce(marker);
});
You've managed to create two markers (even though they have the same variable name), but all you've done is create one event listener function, and it'll only work for the 2nd of those two markers.
If instead you'd done:
var marker1 = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(point.target.x, point.target.y)
});
google.maps.event.addListener(marker1, 'click', function (e) {
toggleBounce(marker1);
});
var marker2 = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(point.target.x, point.target.y)
});
google.maps.event.addListener(marker2, 'click', function (e) {
toggleBounce(marker2);
});
then you've got two different event listener functions, for the two different markers. So by moving this into its own function outwith the loop, and passing each marker into that function as an argument, you're creating a unique event listener for each one. Make sense?
I am using google maps api. I want to have two mouse events ready to trigger at one time. Below is a code snipit.
function initialize() {
var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3 }
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
}
function addLatLng(event) {
var path = poly.getPath();
if(!draw)
{
path.push(event.latLng);
path.push(event.latLng);
draw = true;
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map });
google.maps.event.addListener(map, 'mousemove', moveTrackLine);
}
else
{
path.push(event.latLng);
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map });
draw = false;
}
}
function moveTrackLine(event) {
var path = poly.getPath();
// replace the old point with a new one to update the track
path.pop();
path.push(event.latLng);
}
When I click on the map the first time I see a marker placed on the map. Then when the mouse is moved I see the polyline update and follow my curser correctly. Next if I click on the map I do not see a marker placed on the map nor do I ever go into the addLatLng function. Thanks in advance for your help and time.
-tim
set the clickable-option of the polyline to false.
The issue: As soon as the mousemove-event is applied to the map, you will not be able to click on the map anymore, because below the mouse-cursor is always the polyline.
When you set the clickable-option of the polyline to false, the polyline does not respond to mouse-events and the click-event will be passed to the map.
I want to pass related marker id by clicking marker on google map. I am using marker.getId() function to retrieve marker id. But the marker id is not passing along with url. How can i do this? Any Help?
function AddressMap(lat,lang,markerid)
{
var latLng = new google.maps.LatLng(lat,lang);
var marker = new google.maps.Marker({
'map': map,
position: latLng,
'latitude' :lat,
'longitude' :lang,
icon: image,
shadow: shadow,
id: markerid
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
window.location = "www.cickstart.com/" + marker.getId();
});
}
you can try directly to access the id:
google.maps.event.addListener(marker, 'click', function() {
window.location = "www.cickstart.com/" + marker.id;
});
the best way to do this is add a metadata to marker
var marker = new google.maps.Marker(markerOptions);
marker.metadata = {type: "point", id: 1};
if you have so many marker push the marker to array marker.
You can add any data that you want. and simply call it, set it or get it.
the sample like this one:
markers[0].metadata.id