I have a code that allows the user to place multiple markers on the map just by click on the map. So each marker is placed on the map.
My question, how can I gather all the markers lat/lon in an array?
google.maps.event.addListener(map, 'click', function(e) {
var marker = new google.maps.Marker({
position: e.latLng,
map: map
});
google.maps.event.addListener(marker, 'rightclick', function(e) {
this.setMap(null);
});
});
I have here demonstrate here JSFiddle
Just in the click listener, add marker to some global array:
var markers = [];
google.maps.event.addListener(map, 'click', function(e) {
var marker = new google.maps.Marker({
position: e.latLng,
map: map
});
markers.push(marker); // add marker to the global array
google.maps.event.addListener(marker, 'rightclick', function(e) {
this.setMap(null);
delete markers[markers.indexOf(marker)]; // remove marker from array
});
});
Related
for(; j<cos[i].length; j++) {
var markerLatLng = new google.maps.LatLng(cos[i][j].lat, cos[i][j].lng);
// Place a draggable marker on the map
var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
draggable: true,
title: "Drag me!"
});
google.maps.event.addListener(marker, 'rightclick', function(mouseEvent) {
alert(marker.getPosition().lat());
});
}
The page is alerting the position of the last marker in the list or the lastly created marker. The goal is to display position of each individual marker when right click on that marker is clicked but right clicking is currently only displaying the position of the last marker. Why is the function for event handler only seeing the last marker?
I appreciate any help! Thanks!
Try this keyword:
google.maps.event.addListener(marker, 'rightclick', function() {
alert(this.getPosition().lat());
});
How would I go about placing a marker at the current centre of the map using a button click?
Currently I have it so a marker is placed at a specific latitude and longitude (53.41291, -8.243889999999965). But I would like it to be placed at the current centre of the map.
Here's my Javascript as it is:
var latlng = new google.maps.LatLng(53.41291, -8.243889999999965) ;
var infowindow = new google.maps.InfoWindow({
content: 'This is a place'
});
function addmarker(latilongi) {
var marker = new google.maps.Marker({
position: latilongi,
title: 'new marker',
draggable: true,
map: map
});
map.setCenter(marker.getPosition())
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
$('#addPoint').on('click', function() {
addmarker(latlng)
})
You want to centre your marker on the map's centre?
function addmarker() {
var marker = new google.maps.Marker({
position: map.getCenter(),
title: 'new marker',
draggable: true,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
If you also want to be able to click on the map, and add a marker (and presumably then following the same rule, centre the map on that position)...
google.maps.event.addListener(map, 'click', function(event) {
map.setCenter(event.latLng);
addmarker();
});
I need people to be able to click on the map, place a marker, update the input fields, and still be able to dbl click to zoom in more even after the marker is set.
What I have now does everything besides allow a dblclick event to zoom.
var map;
var marker = null;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.639, -95.689),
zoom: 3
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
$("#latcoord").val(event.latLng.lat());
$("#longcoord").val(event.latLng.lng());
if (marker) { marker.setMap(null); }
marker = new google.maps.Marker({ position: event.latLng, map: map});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Thanks!
set disableDoubleClickZoom to false
like this
map.set("disableDoubleClickZoom", false);
I'm trying to show markers on my map. but it's not showing them.
this is the code I use:
var map;
var markers = new Array();
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(27.9881, 86.9253),
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListener(map, 'click', addMarker);
}
function addMarker(event) {
markers.push(event.latLng);
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
console.log(markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
the console is logging on every click an new coordinate, so the function is called, and coordinates are passed. And I can't really see any problems in the marker code.
So can anyone see the problem?
map is a local variable, only visible inside initialize.
Use this instead of map when you set the map-property of the marker:
function addMarker(event) {
markers.push(event.latLng);
marker = new google.maps.Marker({
position: event.latLng,
map: this
});
}
Explanation:
the callback will be executed in the scope of the object that triggers the event. Here it is the Maps-instance(because the click-listener has been applied to the map ), this will refer to this object inside the callback.
markers.push(event.latLng);
Here you're pushing the latlng, not the marker.
markers is an array variable with global scope, whereas marker is a local variable.
In markers array you have to insert each inidividual marker and then process it.
function addMarker(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
markers.push(marker);
}
I am making a website over cyclists killed in Norway. For my project I have been using google maps api v3, but I have vague familiarity with javascript. You can see my result so far here: http://salamatstudios.com/googlemapstest/
Basicly I want to have multiple markers with infowindows on each one. Each one of the infowindows will contain:
Name (age),
Location,
Date of death,
Read more (which will be linked to a page on the website itself).
Like this example here: http://salamatstudios.com/bicycles/
I tried working with just one marker and infowindow and that worked just fine. When I want to add new markers with custom info windows on each I get stuck. At the moment I have 3 markers on different locations as seen in the first link, but none of the info windows appear when I click the marker..
How do I go around it to code it so the infowindows appear? And how can I have custom text in every infowindow? I am going to have about 30-40 markers on the map when it is done. All of the info windows will have different types of information.
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(65.18303, 20.47852),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// MAP CONTROLS (START)
mapTypeControl: true,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_TOP
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
// MAP CONTROLS (END)
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
// -------------- MARKER 1
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(59.96384, 11.04120),
map: map,
icon: 'img/bike5.png'
});
// MARKER 1'S INFO WINDOW
var infowindow1 = new google.maps.InfoWindow({
content: 'Name<br />Location<br />Date<br /><br />Read more(test link)'
});
// End of infowindow code
// Adding a click event to the marker
google.maps.event.addListener(marker1, 'click', function() {
// Calling the open method of the infoWindow
infowindow1.open(map, marker);
});
// -------- END OF 1st MARKER
// -------------- MARKER 2
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(60.63040, 8.56102),
map: map,
icon: 'img/bike5.png'
});
// MARKER 2'S INFO WINDOW
var infowindow2 = new google.maps.InfoWindow({
content: 'Name<br />Location<br />Date<br /><br />Read more(test link)'
});
// End of infowindow code
// Adding a click event to the marker
google.maps.event.addListener(marker2, 'click', function() {
// Calling the open method of the infoWindow
infowindow2.open(map, marker);
});
// -------- END OF 2nd MARKER
// -------------- MARKER 3
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(60.39126, 5.32205),
map: map,
icon: 'img/bike5.png'
});
// MARKER 3'S INFO WINDOW
var infowindow3 = new google.maps.InfoWindow({
content: 'Name<br />Location<br />Date<br /><br />Read more(test link)'
});
// End of infowindow code
// Adding a click event to the marker
google.maps.event.addListener(marker3, 'click', function() {
// Calling the open method of the infoWindow
infowindow3.open(map, marker);
});
// -------- END OF 3rd MARKER
}
google.maps.event.addDomListener(window, 'load', initialize);
Would be great if some could give me a clue. I've tried searching around a bit, but I can't really find my answer. Thanks in advance! :-)
You need to attach the infowindow to the correct markers. Currently they are all associated with "marker", which doesn't exist (and should cause an error message in the javascript console when you click on the markers).
Inside the click listener change:
infowindow1.open(map, marker);
infowindow2.open(map, marker);
infowindow3.open(map, marker);
To:
infowindow1.open(map, marker1);
infowindow2.open(map, marker2);
infowindow3.open(map, marker3);
working example
In addition to HoangHieu Answer when you use for loop it better to use it this way:
marker.info = new google.maps.InfoWindow({
content: 'some text'
});
google.maps.event.addListener(marker, 'click', function() {
this.info.open(map, this);
});
google.maps.event.addListener(marker1, 'click', function() {
// Calling the open method of the infoWindow
infowindow1.open(map, marker);
});
change to
google.maps.event.addListener(marker1, 'click', function() {
// Calling the open method of the infoWindow
infowindow1.open(map, this);
});