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);
Related
This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed last month.
I want to close the current infowindow when I click on any next marker, for now it shows all infowindows after clicking.
My JavaScript
var marker = new MarkerWithLabel({
position: latlng,
draggable: false,
raiseOnDrag: true,
map: map,
icon: 'a.png',
labelContent: '<?php echo $rating.' % Review '.$review;?>',
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels"
});
marker['infowindow'] = new google.maps.InfoWindow({
content: '<p><?php echo $name ;?></p>'
});
google.maps.event.addListener(marker, 'click', function() {
this['infowindow'].open(map, this);
});
Save previously opened infowindow in a variable and then close when a new window opens.
var currWindow =false;
base.attachInfo = function(marker, i){
var infowindow = new google.maps.InfoWindow({
content: "Content"
});
google.maps.event.addListener(marker, 'click', function(){
if( currWindow ) {
currWindow.close();
}
currWindow = infowindow;
infowindow.open(base.map, marker);
});
}
I have a simple Google Maps feat I'm trying and failing to accomplish.
Presently, I can display my map, then cycle through a list of Projects via PHP (I'm using ExpressionEngine), and add each project's latitude/longitude to a JavaScript array.
Once the values are in the JavaScript array, I use jQuery to cycle through each one, and add a marker to the map.
I'm able to click the map and have it respond appropriately; however, when I attempt to click one of the markers, nothing happens at all.
I have tried moving code, renaming, changing, editing, and tweaking endlessly... I cannot figure this out. Any help at all would be hugely appreciated. My code is as follows:
<script>
// Create the new map_locations array
var map_locations = [];
</script>
<!-- The following ExpressionEngine script loops through all the 'projects' on the site,
then pushes each project to the map_locations array. -->
{exp:channel:entries channel="projects"}
<script>
map_locations.push( ['{url_title}', '{project_latitude}', '{project_longitude}', '{categories}{category_name}{/categories}', '{title}'] );
</script>
{/exp:channel:entries}
<script>
var marker;
function initialize() {
// To add the marker to the map, use the 'map' property
var mapOptions = {
center: { lat: 51.884 , lng: -95.147 },
zoom: 4
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Create a new location lat/long var, newLatLng
var newLatLng;
var contentString = "<div id='info_window'>this is the info window</div>"
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var iconBase = '/images/map_icon_';
$.each( map_locations, function()
{
newLatLng = new google.maps.LatLng( this[1] , this[2] );
marker = new google.maps.Marker({
position: newLatLng,
map: map,
title: this[4],
icon: iconBase + this[3]
});
});
google.maps.event.addListener(marker, 'click', function() {
console.log( "This marker's url_title is: " + this[0] );
});
google.maps.event.addListener(map, 'click', function() {
console.log( "Testing map click" );
});
}
// Initialize the map
google.maps.event.addDomListener(window, 'load', initialize);
</script>
You are trying to add event listener for markers after the loop where marker gets defined rather than in the loop
Try:
$.each( map_locations, function(){
var newLatLng = new google.maps.LatLng( this[1] , this[2] );
var marker = new google.maps.Marker({
position: newLatLng,
map: map,
title: this[4],
icon: iconBase + this[3]
});
google.maps.event.addListener(marker, 'click', function(marker) {
console.log( "This marker's url_title is: " + marker.title );
});
});
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 added code for tool tip display when hovering the pointers in the google map.It is showing the tool tip but the content is "undefined". How can put the corresponding content related to the pointer into the tool tip box.The code is :
function initialize() {
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(29.7,-95.4),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("salon_map"), myOptions);
var locations = [
__newmapdetls__
];
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var image = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+location[3]+"|FF0000|000000",
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: location[0],
zIndex: location[3],
tooltip:"testinggg"+i
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow1.open(map, this);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow1.close(map, this);
});
var infowindow1 = new google.maps.InfoWindow({
content: "'"+this.tooltip+"'"
});
}
}
Also url is : http://myshopsalon.com/find-a-shop-salon
A couple of things I noticed when looking at your page source:
Your page is loading both jQuery 1.10.1 and 1.7.2. But it isn't using noConflict(). So these two jQuery versions are stepping on each other.
You're also loading three copies of the Maps API: two copies of version 3 and a copy of the deprecated version 2 API.
Now to your question:
Use a closure to save your variables for each iteration of the marker loop. You can do this by simply calling a function in each iteration.
Instead of using this when you call infowindow.open(), use marker. (this and marker may be the same in this context, but use marker for consistency.)
The .close() method of an infowindow does not take any parameters.
Don't set the tooltip property when you create the marker. That may work, but it isn't documented that you can add your own properties in this fashion. Instead, simply use a local variable or parameter for tooltip.
I would create the infowindow before adding the event listeners. This will actually work fine in either order (since the event listeners are asynchronous), but it looks better to see the infowindow created first.
So, change your for loop to:
for (var i = 0; i < locations.length; i++) {
addMarker( locations[i], "testinggg" + i );
}
function addMarker( location, tooltip ) {
var image = new google.maps.MarkerImage(
"http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+location[3]+"|FF0000|000000",
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34)
);
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: location[0],
zIndex: location[3]
});
var infowindow = new google.maps.InfoWindow({
content: "'" + tooltip + "'"
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
}
That said, you may not like the result you get when you open an infowindow in response to moving the mouse over a marker. What if the marker is near the top of the window? The page will immediately move to make the infowindow fit on the screen, and now the marker won't be under the mouse any more.
You're already setting the title property when you create the marker. This should cause a normal browser tooltip to appear when the mouse is hovered over the marker, and it won't cause the map to move as the infowindow may do. Any reason not to just use that tooltip instead of the infowindow? You could just remove all of the infowindow code, or let the infowindow open on a click as it normally would.
Set the content of the infowindow onmouseover(you may access there the tooltip-property of the specific marker)
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow1.setContent(this.tooltip);
infowindow1.open(map, this);
});
the initializing of infowindow1 move to outside the loop and leave the arguments empty.
Use the below code:
var infowindow1 = new google.maps.InfoWindow({
content: "'"+marker.tooltip+"'"
});
EDIETD:
var contentString = "testinggg"+i;
var infowindow1[i] = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: location[0],
zIndex: location[3],
tooltip:"testinggg"+i
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow1[i].open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow1[i].close(map, marker);
});
You can not get the property of marker in the info window. So you need to define the content in other variable.
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);
});