We Keep Coding

close google map popup on mousemove or mouseout

How can I close the popup that opens on hover over marker after mouse move away or out of it?
var icon1 = "imageA.png";
var icon2 = "imageB.png";
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icon1,
title: "some marker"
});
google.maps.event.addListener(marker, 'mouseover', function() {
popup = new Popup(
new google.maps.LatLng(-33.866, 151.196),
document.getElementById('content'));
popup.setMap(map);
marker.setIcon(icon2);
});
google.maps.event.addListener(marker, 'mouseout', function() {
// ? close popup
});
or rather I need a global solution to close all popups on the map.
the custom popup comes from here https://developers.google.com/maps/documentation/javascript/examples/overlay-popup

You can see the following JSFiddle:
https://jsfiddle.net/inussaha/otuz1y5h/10/
click on the map, you will see the popup getting removed.
the Popup class extends google.maps.OverlayView. so you have all the functionality inherited from google.maps.OverlayView.
see the following code to add/remove Popup
popup.setMap(null); //this will remove the popup overlay;
//the following will show the popup overlay. (map must be a valid google map object)
popup.setMap(map);
so your code should look like following:
var icon1 = "imageA.png";
var icon2 = "imageB.png";
var popup = null;
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icon1,
title: "some marker"
});
google.maps.event.addListener(marker, 'mouseover', function() {
popup = new Popup(
new google.maps.LatLng(-33.866, 151.196),
document.getElementById('content'));
popup.setMap(map); // show the popup
marker.setIcon(icon2);
});
google.maps.event.addListener(marker, 'mouseout', function() {
popup.setMap(null); // close the popup
});

Marker popup displayed outside Google map

I'm trying to make this code by Geocodezip show only one popup at the time on the side of the map, the other(s) being hidden when not active.
I've tried to add an if..else statement to the google.maps.event.addListener for this but not working so far.
What should I do in the if..else statement to make all popups hidden unless active?
google.maps.event.addListener(marker, 'click', function(e) {
if ( popup.dialog('open') ) {
popup.show();
} else {
popup.hide();
}
});

pass a unique id to the map marker, use that id to toggle the correct popup
var popup = []
addMarkerWithWindow("first","This is Lemans", new google.maps.LatLng(48.006922, 0.20874), map);
addMarkerWithWindow("second","This is Paris", new google.maps.LatLng(48.856291, 2.352705), map);
function addMarkerWithWindow(id, name, coordinate, map) {
/* var popup=$('<div/>', {
content: name
});
*/
var image = 'rss.png';
var marker = new google.maps.Marker({
map: map,
// icon: image,
position: coordinate
customId:id
});
// jQuery
popup[id]=$('<div/>', {
'id':'This is '+name,
'text':'Hello World!'
"class":'popp'
}).dialog({
'autoOpen':false,
'width': 600,
'height':600,
'resizable':false,
'modal':false,
'title':name
});
google.maps.event.addListener(marker, 'click', function(e) {
$('.popp').dialog('close');
popup[this.customId].dialog('open');
});
}

how to access a marker in an google maps event handler?

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());
});

Google Maps API: Place marker at current map location

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();
});

tooltip content undefined - google map

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.