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();
});
Related
I have a google map integration in my ionic app. I want my marker on map appear whenever map appears however it depends on 'click' event. I have changed into 'idle' however, it doesn't even show the content of marker.
Question: Into what shall I change 'click'?
function getMap(lat, lon, content) {
var latLng = new google.maps.LatLng(lat, lon);
var mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
//Wait until the map is loaded
google.maps.event.addListenerOnce($scope.map, 'idle', function () {
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
var infoWindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open($scope.map, marker);
});
});
}
just delete google.maps.event.addListener(marker, 'click', function () {}) and leave infoWindow.open($scope.map, marker); alone
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
});
});
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);
});
I'm quite a noob when it comes to Javascript, but I'm trying out something for my website/school project.
On a map I want to display 2 locations, with each a marker and an informationwindow of there own. 1 shows my location + contact details, the second marker should display other details for a company.
I've managed to get 2 markers in the map to display at the place I want to, but the next problem is giving each marker it's own InfoWindow.
var Rafael = new google.maps.LatLng(52.341949,6.682236);
var Aandagt = new google.maps.LatLng(52.341949,6.782236);
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(52.341949,6.682236),
streetViewControl: false,
zoomControl: false,
panControl: false,
scaleControl: false,
overviewMapControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: Rafael,
map: map,
title:"Rafael"
});
var marker = new google.maps.Marker({
position: Aandagt,
map: map,
title:"Aandagt"
});
var infowindow = new google.maps.InfoWindow({
content: '<h9>AANDAGT Reclame & Marketing</h9><h10><br /><br />Einsteinstraat 8b<br />7601 PR Almelo<br /><br />Telefoon (0546) 85 03 69<br />Fax (0546) 45 53 31<br /><br />info#aandagt.nl</h10>'
})
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close(map,marker);
});
Any help or suggestion how to add and attach 2 InfoWindows, 1 for marker 'Rafael' and 1 for marker 'Aandagt' would be much appreciated.
To view my current map: http://www.imrafaelhi.nl/stageverslag/?page_id=266
You have created 2 markers with different position values and an mouseover listener for the marker named Rafael.
I suggest you declare the markers as: marker1 and marker2.
Then create 2 contentstrings vars for each infowindow associated with each marker: content1, content2
Add a listener (mouseover) for each marker to show the content string.
Add a listener (mouseout) to close the infowindow associated with the marker.
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, this);
});
// assuming you also want to hide the infowindow when user mouses-out
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
you can give id to every marker..and can access those markers with their ids:
var marker = new google.maps.Marker({
position:mycenter,
title:infoName,
id: count++
// animation:google.maps.Animation.BOUNCE
});
if(marker.id == count) //get access to marker id value..
{
//do what you want..
}
I have this code :
var markers = new Array();
markers[0] = new google.maps.Marker({
position: new google.maps.LatLng(45.910078, 10.838013),
map: map,
title: "Data 1"
});
google.maps.event.addListener(markers[0], 'click', function() {
var infowindow = new google.maps.InfoWindow({
content: $('#map_info_window_id').html()
});
infowindow.open(map, markers[0]);
});
markers[1] = new google.maps.Marker({
position: new google.maps.LatLng(46.176086, 11.064048),
map: map,
title: "Data 2"
});
google.maps.event.addListener(markers[1], 'click', function() {
var infowindow = new google.maps.InfoWindow({
content: $('#map_info_window_id').html()
});
infowindow.open(map, markers[1]);
});
and how you can see, I have a listener for each marker!
Now, when I click on a marker, I'd like to close all marker (in fact only one, the previously opened).
How can I do it on Google Maps API 3?
set the map of the marker to null:
marker.setMap(null);