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

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

Remove marker from Google Maps API V3

I have a map where I want to add a marker (with info window) via a checkbox. It also works quite well, but I just can not get it deleted again when I uncheck the checkbox. Can anyone help?
See also here: http://jsfiddle.net/x8D7y/
function clearOverlays() {
google.maps.event.clearListeners(marker300, 'click');
}
function showOverlays() {
var marker300 = new google.maps.Marker({
position: new google.maps.LatLng(45.0, 1.0),
map: map /*,
icon: 'img/bike5.png' */
});
var infowindow300 = new google.maps.InfoWindow({
content: '<div style="width: 200px;">Test 300 - Link</div>'
});
google.maps.event.addListener(marker300, 'click', function() {
infowindow300.open(map, marker300);
});
}

You have to use an external Array which holds the extra markers you use with the map. In your case I have added the following array:
var extraMarkers = [];
Then when I click the checkbox, I am getting the ID of that checkbox, and send it in both showOverlays() and clearOverlays() as function argument.
Then, in showOverlays(), I am using the checkbox ID as extraMarkers key and the marker as value.
Finally, in clearOverlays() I use again the checkbox ID to get the element with this ID from the extraMarkers array and I see the map to null, in order to remove the marker.
See here the working example : http://jsfiddle.net/x8D7y/1/
Here is the full code required by you:
var map;
var extraMarkers = [];
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(45.0, 1.0)
};
map = new google.maps.Map($('#map')[0], myOptions);
var marker1 = new google.maps.Marker(
{
position: new google.maps.LatLng(45.5, 1.5),
map: map /*,
icon: 'img/bike5.png' */
}
);
var infowindow1 = new google.maps.InfoWindow(
{
content: '<div style="width: 200px;">Test 1 - Link</div>'
}
);
google.maps.event.addListener(
marker1,
'click',
function()
{
infowindow1.open(map, marker1);
}
);
function clearOverlays(myID)
{
google.maps.event.clearListeners(extraMarkers[myID], 'click');
extraMarkers[myID].setMap(null);
}
function showOverlays(myID)
{
var marker300 = new google.maps.Marker(
{
position: new google.maps.LatLng(45.0, 1.0),
map: map /*,
icon: 'img/bike5.png' */
}
);
extraMarkers[myID] = marker300;
var infowindow300 = new google.maps.InfoWindow(
{
content: '<div style="width: 200px;">Test 300 - Link</div>'
}
);
google.maps.event.addListener(
marker300,
'click',
function()
{
infowindow300.open(map, marker300);
}
);
}
$('#mapall').change(
function()
{
var myID = $(this).attr('id');
if($('#mapall').attr('checked'))
{
showOverlays(myID);
}
else
{
clearOverlays(myID);
}
}
);

if you have single marker on map then use marker.setMap(null);
if Multiple marker make an array for marker
markersArray.push(marker);
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}

Try this:
marker300.setMap(null);

Your marker was not visible outside of showOverlays() function. Error was reported in console:
Uncaught ReferenceError: marker300 is not defined
Minimum change is to define marker300 as global:
var map;
var marker300;
and delete marker in
function clearOverlays() {
google.maps.event.clearListeners(marker300, 'click');
marker300.setMap(null);
}
and remove var in front of variable marker300 in function showOverlays()
See example in fiddle
If you want to have several markers than you will have to follow solution from user Merianos Nikos

google maps, adding click event to anchors to open info windows

I have an application using Google maps, currently I have a number of markers added to the page and clicking on them opens up a info window.
I also have a pagniated list of results which I would like to open the corresponding info window when clicked. Currently clicking on one of these anchors opens all of the info windows, but this is as far as I can get currently.
I have a position marker function:
positionMarkers: function(lat, lng, user) {
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(lat, lng),
map: map
});
if (caption == null) {
var caption = 'No caption available';
} else {
var caption = caption.text;
}
var contentString = '<div class="infoWindow"><h2>' + user + '</h2></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 284
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
$('.instaframe').bind('click', function(){
infowindow.open(map, marker);
});
}
The trouble I am having is with the bind function towards the end of the snippet. I am not sure where to go to bind the click event with just the marker being added each time the positionMarkers function runs.
Marker one
Marker two
Marker three
Help would be greatly apprecaited.

Custom popup Google map

How to get to do this kind of popup with google map?
Go http://www.flightradar24.com/ and click on an airport and can see that the popup is completely personalized.
So I managed to create popup on google map but now I do not see how this is put a different message for each popup.
And how to customize the popup with css and javascript include inside?
So now I'm here and I want to know if for the moment my script is correct and how to later to reach a popup like Flightradar24 airport?
<script type='text/javascript'> $(function(){function initialize() {
var mapOptions = {
zoom: 4,
disableDefaultUI: true,
center: new google.maps.LatLng(45.35, 4.98),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
addMarkerWithWindow("This is Lemans", new google.maps.LatLng(48.006922, 0.20874), map);
addMarkerWithWindow("This is Paris", new google.maps.LatLng(48.856291, 2.352705), map);
}
function addMarkerWithWindow(name, coordinate, map) {
var popup=$('<div/>', {
content: name
});
var image = 'rss.png';
var marker = new google.maps.Marker({
map: map,
icon: image,
position: coordinate
});
var styles = [
{
featureType: "all",
stylers: [
{ saturation: -15 },
{ lightness: -10 },
]
},
];
map.setOptions({styles: styles});
// jQuery
var popup=$('<div/>', {
'id':'This is Lemans',
'text':'Hello World!'
}).dialog({
'autoOpen':false,
'width': 600,
'height':600,
'resizable':false,
'modal':false,
'title':'Le Mans'
});
google.maps.event.addListener(marker, 'click', function(e) {
console.log(e);
popup.dialog('open');
});}initialize();});//]]> </script>

If you change your addMarkerWithWindow function to use it's arguments in the popup, your code works for me:
function addMarkerWithWindow(name, coordinate, map) {
var image = 'rss.png';
var marker = new google.maps.Marker({
map: map,
// icon: image,
position: coordinate
});
// jQuery
var popup=$('<div/>', {
'id':'This is '+name,
'text':'Hello World!'
}).dialog({
'autoOpen':false,
'width': 600,
'height':600,
'resizable':false,
'modal':false,
'title':name
});
google.maps.event.addListener(marker, 'click', function(e) {
// console.log(e);
popup.dialog('open');
});
}
(console.log doesn't work in IE)

Hi You are looking for something like JSFiddle with custome popup on map click. Its just a quick mockup for you to show how you can do show hide on mouseover event. You probably can put some nice animation and stop event propagation or make it an event on click as well.
The code in you should be looking at is from line 120 to 151
events:{
mouseover: function(marker, event, context){
var listelement = jQuery("li[data-mapid='"+context.data.id+"']");
jQuery(listelement).attr('style','background-color:#ccc');
jQuery(listelement).attr('data-isactive','1');
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.open(map, marker);
infowindow.setContent(context.data.ht);
jQuery("#customPopup").html(context.data.ht); //This puts html in popup. You can even get html from a jquery template or get it via json if you want.
jQuery("#customPopup").show(500); // This part shows the popup
} else {
$(this).gmap3({
infowindow:{
anchor:marker,
options:{content: context.data.ht}
}
});
jQuery("#customPopup").html(context.data.ht); //This is when no window is present so we create new window and again full it with html as you wish
jQuery("#customPopup").show(500); //Then show it to the user
}
},
mouseout: function(marker,event,context){
var listelement = jQuery("li[data-mapid='"+context.data.id+"']");
jQuery(listelement).attr('style','background-color:#fff');
jQuery(listelement).attr('data-isactive','0');
var infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.close();
jQuery("#customPopup").html(""); //Hide the html or not. if you do this then html will go away first before hiding it not so good animated effect but you get the point.
jQuery("#customPopup").hide(500); //Take it away from user
}