How to show info window? - google-maps

Question

Hi guys been trying my best to solve this problem. I can't see info window even after clicking the marker
<script type="text/javascript">
function initialize() { //Initalize JS after onload
var map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
var randomPoint0 = new google.maps.LatLng(18.9750, 72.8258); //First Location
var marker0 = new google.maps.Marker({ //Set up marker
position: randomPoint0,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid0'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker0.getPosition());
});
var randomPoint1 = new google.maps.LatLng(19.8833, 76.7833); //First Location
var marker1 = new google.maps.Marker({ //Set up marker
position: randomPoint1,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid1'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker1.getPosition());
});
var randomPoint2 = new google.maps.LatLng(25.6000, 85.1167); //First Location
var marker2 = new google.maps.Marker({ //Set up marker
position: randomPoint2,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid2'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker2.getPosition());
});
var randomPoint3 = new google.maps.LatLng(18.5333, 73.8667); //First Location
var marker3 = new google.maps.Marker({ //Set up marker
position: randomPoint3,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid3'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker3.getPosition());
});
var randomPoint4 = new google.maps.LatLng(22.3000, 70.7833); //First Location
var marker4 = new google.maps.Marker({ //Set up marker
position: randomPoint4,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid4'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker4.getPosition());
});
var randomPoint5 = new google.maps.LatLng(17.8625, 78.886); //First Location
var marker5 = new google.maps.Marker({ //Set up marker
position: randomPoint5,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid5'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker5.getPosition());
});
var randomPoint6 = new google.maps.LatLng(13.0833, 80.2833); //First Location
var marker6 = new google.maps.Marker({ //Set up marker
position: randomPoint6,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid6'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker6.getPosition());
});
var randomPoint7 = new google.maps.LatLng(28.6167, 77.2167); //First Location
var marker7 = new google.maps.Marker({ //Set up marker
position: randomPoint7,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid7'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker7.getPosition());
});
var randomPoint8 = new google.maps.LatLng(19.9833, 73.8000); //First Location
var marker8 = new google.maps.Marker({ //Set up marker
position: randomPoint8,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid8'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker8.getPosition());
});
var randomPoint9 = new google.maps.LatLng(30.7343, 76.7933); //First Location
var marker9 = new google.maps.Marker({ //Set up marker
position: randomPoint9,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid9'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker9.getPosition());
});
var randomPoint10 = new google.maps.LatLng(22.5697, 88.3697); //First Location
var marker10 = new google.maps.Marker({ //Set up marker
position: randomPoint10,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid10'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker10.getPosition());
});
map.setCenter(marker0.getPosition());
map.setZoom(5);
var info = message;
var infoWindow = new google.maps.InfoWindow({
content: message
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open(map, marker);
});
}
</script>
this is my link
http://www.safarikidindia.com/safari-map.php#
All the marker pins are dynamic so how I can show address text, can you please advice

Answer 1

You need to had an infoWindow for each marker!
Supposing you have 10 different messages, stored in 10 variables (message0, message1, message2,...), you should write:
var infoWindow0 = new google.maps.InfoWindow({
content: message0
});
google.maps.event.addListener(marker0, 'click', function () {
infoWindow0.open(map, marker0);
});
var infoWindow1 = new google.maps.InfoWindow({
content: message1
});
google.maps.event.addListener(marker1, 'click', function () {
infoWindow1.open(map, marker1);
});
var infoWindow2 = new google.maps.InfoWindow({
content: message2
});
google.maps.event.addListener(marker2, 'click', function () {
infoWindow2.open(map, marker2);
});
...(and so on until marker10)