We Keep Coding

google maps: open infowindow after map & marker load

I'm working with google maps api 3. It's a bit of annoyance, but how do I get infowindow.open after the marker and the map have loaded?
I've tried to add various listeners such as tilesloaded and idle and haven't had any joy.
In this working example you see the infowindow is loading before anything else:
http://codepen.io/anon/pen/WvbexY
function initialize() {
if (document.getElementById("maper")) {
var latlng = new google.maps.LatLng(52.370778, 4.899448);
var mapOptions = {
zoom: 11,
center: latlng,
scrollwheel: "",
scaleControl: "",
disableDefaultUI: "",
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var tinygmaps = new google.maps.Map(document.getElementById("maper"), mapOptions);
var marker = new google.maps.Marker({
map: tinygmaps,
position: tinygmaps.getCenter()
});
var contentString = '<p>WHY ME FIRST?</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
position: latlng,
});
infowindow.open(tinygmaps, marker);
//var openwindow = google.maps.event.addListener(tileListener, 'tilesloaded', open_infowindow); // Hummmm!
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function open_infowindow() {
infowindow.open(tinygmaps, marker);
google.maps.event.removeListener(tileListener);
};

Edit: Changed the codepen to listen for tilesloaded before displaying the infowindow. The fork of your codepen with the tilesloaded listener is here: http://codepen.io/brenzy/pen/VLYwGN
Because SO needs some code:
google.maps.event.addListenerOnce(tinygmaps, 'tilesloaded', function() {
// open the infowindow
});
On my machine, listening for both tilesloaded and idle appear to function the same. (Without either listener, the infowindow is displayed before the map.)
I am assuming that your version didn't work, because you missed the line
infowindow.open(tinygmaps, marker);
when you were refactoring, so the infowindow was being opened before the listener fired.

Google Maps DomListener Causing Error After Going to Different Page

I am having an issue where the dom listener at the bottom of my google maps function in an external Javascript file is causing a "google is not defined" console error. This happens when I go to a different HTML page on my website that also accesses script in the external file. I believe it is because the DomListener is outside the function however the function does not work if the dom listener is inside the function. Can someone please help me with where to put this DomListener to stop this error occurring? My code is below.
Thankyou very much,
Anthony
function validateEmail() {
var email = form.emailaddress.value;
if (form.firstname.value == "") {
document.getElementById("emailInvalid").style.visibility = "visible";
return false;
} return true;
}
function initialize() {
var myLatlng1 = new google.maps.LatLng(-25.363882,150.044922);
var myLatlng2 = new google.maps.LatLng(-25.363882,152.044922);
var mapOptions = {
zoom: 6,
center: myLatlng1
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString1 = 'Mott Park'
var contentString2 = 'Kilpa Park'
var infowindow = new google.maps.InfoWindow({
});
var marker1 = new google.maps.Marker({
position: myLatlng1,
map: map,
title: 'Park'
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
title: 'Water'
});
google.maps.event.addListener(marker1, 'click', function initialize() {
infowindow.close();//hide the infowindow
infowindow.setContent(contentString1);//update the content for this marker
infowindow.open(map, marker1);
});
google.maps.event.addListener(marker2, 'click', function initialize() {
infowindow.close();//hide the infowindow
infowindow.setContent(contentString2);//update the content for this marker
infowindow.open(map, marker2);
});
}
google.maps.event.addDomListener(window, 'load', initialize);

Here a possible duplicate:
"google is not defined" when using Google Maps V3 in Firefox remotely
I think its might be a placement problem similar to Diego Pino in the thread.

Google Map setCenter to a newly clicked area

I have the following code. In the section regarding the 'click' event I want to get the lang of the clicked-point but I have been unable to do so so far. What shall I do?
PROBLEM: I need to setCenter of the map to the newly clicked area.
<div id='map-container' style="width: 500px; height: 500px;">
</div>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(35.7, 51.3999)
};
map = new google.maps.Map(document.getElementById('map-container'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'موقعیت خود را انتخاب کنید'
});
google.maps.event.addListener(document.getElementById('map-container'), 'click', function() {
map.setZoom(10);
map.setCenter(35.7, 51.3999);
console.log(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

(1) To get the lat/lng of the point which is being clicked in Google Maps, you have to use click eventListener of Google Maps like
google.maps.event.addListener(map, 'click', function(event) {
});
(2) Then to get the position of the maps that is being clicked,
event.latLng //returns the position
event.latLng.ob //returns lat
event.latLng.pb //returns lng
(3) Now using setCenter(pos), mark the clicked area as map's center like
map.setCenter(event.latLng);
Finally,
google.maps.event.addListener(map, 'click', function(event) {
map.setCenter(event.latLng);
});
Sample Fiddle
EDIT: can you please also tell me how at the same time move the red marker to the newly clicked area?
google.maps.event.addListener(map, 'click', function (event) {
marker.setPosition(event.latLng); //set the position to marker
map.setCenter(marker.getPosition()); //Now set marker to map's center
});
Fiddle

Google Maps API v3 adding multiple markers w/ info windows w/ custom text

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

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