We Keep Coding

How do I create a working infoWindow and use event listener within it?

I am trying to create an infowindow that shows a piece of text 'this is my marker' when the map is loaded but it is not showing. I'm using the exact same code from my lecturer's powerpoint but idk where I'm going wrong.
function initialize(){
let mapDiv = document.getElementById('map');
let mapOptions = {
center: new google.maps.LatLng(Coords.lat,Coords.lng),
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
};
let marker = new google.maps.Marker({
position: new google.maps.LatLng(40.72,-74.00),
map: map,
title: 'I am here!',
icon: svgMarker
});
var infoWindow = new google.maps.InfoWindow({content: 'This is my marker'});
google.maps.event.addListener(marker, 'click', function()
{
infoWindow.open(map,this);
});
map = new google.maps.Map(document.getElementById("map"), mapOptions);
};

You have the sequence slightly wrong. You are attempting to add both the marker & the infoWindow before you have created the map. Perhaps if you re-sequence your code a little like this:
/* assumed that a global variable exists */
let Coords={
lat:41,
lng:-75
};
function initialize(){
let options = {
center: new google.maps.LatLng( Coords.lat,Coords.lng ),
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
};
let map = new google.maps.Map( document.getElementById("map"), options );
let marker = new google.maps.Marker({
position: new google.maps.LatLng(40.72,-74.00),
map: map,
title: 'I am here!'
/*,
icon: svgMarker
*/
});
let infoWindow = new google.maps.InfoWindow( { content:'This is my marker' } );
infoWindow.open( map, marker );
google.maps.event.addListener(marker, 'click', function(e) {
infoWindow.open(map,this);
});
};
To get the infoWindow to appear when the map is loaded you should call the open method and if you supply the previously created marker as the second argument it will appear in the correct location.

Google maps stop showing points v3

Hi i have trouble to find what case a problem to showing the way point on goggle maps as there were no changes in the code for a wile. way point stop showing about last week. im not familiar with google api
var map = null;
var markerArray = []; //create a global array to store markers
var myPoints =
[ [52.664167, -8.509825,' HQ','favicon.ico'] ,[52.836346, -6.913117,'point 1','http://maps.google.com/mapfiles/ms/icons/red.png ' ],[52.836202, -6.912101,'point2','http://maps.google.com/mapfiles/ms/icons/red.png ' ]];
function initialize() {
var myOptions = {
zoom:7,
center: new google.maps.LatLng(53.112, -7.448),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
var mcOptions = {
gridSize: 30,
maxZoom: 15
};
var mc = new MarkerClusterer(map, [], mcOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Add markers to the map
// Set up markers based on the number of elements within the myPoints array
for(var i=0; i<myPoints.length; i++){
createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2], myPoints[i][3]);
}
mc.addMarkers(markerArray , true);
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
function createMarker(latlng, html, icons) {
var contentString = html;
var links = icons;
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: links ,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
// marker.setAnimation(google.maps.Animation.BOUNCE);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
markerArray.push(marker); //push local var marker into global array
}
window.onload = initialize;
<script src="https://maps.googleapis.com/maps/api/js?v=3"
type="text/javascript"></script>
<div id="map" style="width: 800px; height: 750px;" ></div>
Any suggestions?

It seems that you are using MarkerClusterer which is a part of google maps utility library, which was moved recently. Somebody probably referenced the library straight from code.google.com/svn/... in your project, where it's not available anymore and that's why it's broken. You need to find all libraries which are referenced from https://google-maps-utility-library-v3.googlecode.com/svn and replace then with your own links.
Check this SO question, user had very similar issues to yours.
Also! check this question and answers on SO!!, there are users who experienced issues with the same library, to get more information. Read all answers, as replacing https://google-maps-utility-library-v3.googlecode.com/svn with https://rawgit.com/googlemaps/... is not a correct solution, you should download the library assets into your project and reference them from there or use CDN (but not git!).

Event for showing map marker content in google map

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

Google Maps overlay wont position over correct markers

I'm trying to make a list of markers to pin onto a map, each having its own overlay. It's mostly working, however the overlays are all being positioned over the top of one another instead of its corresponding marker.
Code is as follows:
var myCenter = getMyLocation();
function initialize()
{
var mapProp = {
center: myCenter,
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var locations = [
{lat: -27.646670, lng: 152.86918630, text: 'Address #1'},
{lat: -27.6446550, lng: 152.7822390, text: 'Address #2'},
{lat: -27.6062480, lng: 152.7889550, text: 'Address #3'}
];
// Loop through our list and plot them on the map
locations.forEach(function (l) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(l.lat, l.lng),
});
marker.setMap(map);
// Create our infoWindow panel for our marker
var infoWindow = new google.maps.InfoWindow({
content: l.text
});
// Bind click event for our marker
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open(map, marker);
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I have a feeling that the issue is something to do with the on click addListener event

You're simply missing a var:
marker = new google.maps.Marker(...
should be:
var marker = new google.maps.Marker(
As a result, you only have a single global marker variable instead of a unique one for each marker as you should.
Since you're using .forEach with a callback function, that callback function provides you with a closure for each iteration of the loop. So all you need is to take advantage of that closure by making marker a local variable inside the callback.

Maybe closure will help you? Marker is an object, because of it on every loop link to it changes. Closure will prevent it.
google.maps.event.addListener(marker, 'click', (function(marker){ return function () {
infoWindow.open(map, marker);
};})(marker));

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
}