Google Map API info window

Question

I am having a bit of an issue right now, I have created a custom style for my map, but I want it to display an info window. I did set it to the actual lat and long but it doesn't seem to appear somehow .

Can someone give me a hand please ?

    //Google maps Javascript, APi V3    
    var map;
    var sydney = new google.maps.LatLng(-33.866652,151.063670);

    var MY_MAPTYPE_ID = 'custom_style';

    function initialize() {

      var featureOpts = [
        {
          stylers: [
            { hue: '#fdc43d' },
          ]
        }           
      ];

      var mapOptions = {
        zoom: 13,
        center: sydney,
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
        },
        mapTypeId: MY_MAPTYPE_ID
      };

      var contentString = '<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
          '<div id="bodyContent">'+
          '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
          'sandstone rock formation in the southern part of the '+
          'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
          'south west of the nearest large town, Alice Springs; 450&#160;km '+
          '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
          'features of the Uluru - Kata Tjuta National Park. Uluru is '+
          'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
          'Aboriginal people of the area. It has many springs, waterholes, '+
          'rock caves and ancient paintings. Uluru is listed as a World '+
          'Heritage Site.</p>'+
          '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
          'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
          '(last visited June 22, 2009).</p>'+
          '</div>'+
          '</div>';

      var infowindow = new google.maps.InfoWindow({
          content: contentString
      });

      var marker = new google.maps.Marker({
          position: sydney,
          map: map,
          title: 'Uluru (Ayers Rock)'
      });   

      var styledMapOptions = {
        name: 'Custom Style'
      };

      var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions); 

      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

      map.mapTypes.set(MY_MAPTYPE_ID, customMapType);

        google.maps.event.addListener(marker, 'click', function() {
         infowindow.open(map,marker);
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);     

});

Thanks !

Answer 1

The InfoWindow currently will open when you click on the marker, but the marker didn't appear because at the time when you create the marker the map isn't initialized yet.

Fixed code:

//Google maps Javascript, APi V3    
var map;
var sydney = new google.maps.LatLng(-33.866652,151.063670);

var MY_MAPTYPE_ID = 'custom_style';

function initialize() {

  var featureOpts = [
    {
      stylers: [
        { hue: '#fdc43d' },
      ]
    }           
  ];

  var mapOptions = {
    zoom: 13,
    center: sydney,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
    },
    mapTypeId: MY_MAPTYPE_ID
  };

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });
  //create the map before the marker
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

  var marker = new google.maps.Marker({
      position: sydney,
      map: map,
      title: 'Uluru (Ayers Rock)'
  });   

  var styledMapOptions = {
    name: 'Custom Style'
  };

  var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions); 



  map.mapTypes.set(MY_MAPTYPE_ID, customMapType);

    google.maps.event.addListener(marker, 'click', function() {
     infowindow.open(map,marker);
    });
    //triggering the marker-click will open the InfoWindow
    google.maps.event.trigger(marker,'click')
}

google.maps.event.addDomListener(window, 'load', initialize);