How to create CSS styled dom element inside Google Maps InfoWindow?

Question

I tried creating a custom element inside the google Maps infoWindow but it does not work. I have properly linked css and javascript as well.

function openWindow(map,marker){
    var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Place #1</h1>'+
      '<div id="bodyContent">'+
      '<div class="panel panel-default" id="spr_32">
        <div class="panel-heading">
          <h4 class="panel-title">With buttons</h4>
          <div class="panel-heading-content"><a href="#" class="btn btn-success btn-xs">Like</a></div>
        </div>
        <div class="panel-body">Place. place continues and this stupid place doesnot make sense.</div>
      </div>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxwidth:600
  });
  google.maps.event.addListener(marker, 'click', function() {
           infowindow.open(map,marker);
  });
}

Answer 1

Are you setting your marker? Because on click function, it expects "marker" as an argument. You need to set your marker variable above your click event listener. Let me write my solution for these kind of custom maps, maype it helps:

/* 1 - SET OPTIONS AND STYLES */

          var mapId = "mapId";
          var latitude = 40.986809;
          var longitude = 29.021807;
          var mapName = "Your Map Name";
          var zoomLevel = 16;
          var iconUrl = 'http://path/to/googleMaps/logo.png';
          var scrollable = false;
          var disableDefaultUI = false;
          var draggableMarker = false;
          var marker;
          var map;
          var contentString = '<div id="mapContent">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Lorem ipsum</h1>'+
                '<div id="bodyContent">'+
                '<p><b>Lorem ipsum</b>, dolor sit amet'+

                '</p>'+
                '</div>'+
                '</div>';
          var styles = [
            //Custom Styles

          ];



          /* 2 - INITIALIZE THE MAP WITH YOUR OPTIONS ABOVE */

          function initialize() {
              var mapOptions = {
                  zoom: zoomLevel,
                  scrollwheel: scrollable,
                  center: new google.maps.LatLng(latitude,longitude),
                  mapTypeControlOptions: {
                      mapTypeIds: [mapName]
                  },
                  disableDefaultUI: disableDefaultUI,
                  panControl: false,
                  zoomControl: true,
                  scaleControl: true
              };
              var div = document.getElementById(mapId);
              var map = new google.maps.Map(div, mapOptions);
              var styledMapType = new google.maps.StyledMapType(styles, { name: mapName });
              map.mapTypes.set(mapName, styledMapType);
              map.setOptions({styles: styles});



              /***************** MARKER *********************************/
              marker = new google.maps.Marker({
                  map:map,
                  draggable:draggableMarker,
                  icon: iconUrl,
                  animation: google.maps.Animation.DROP,
                  position: new google.maps.LatLng(latitude,longitude)
              });



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

              /*If you initialize infowindow on window load*/
              infowindow.open(map,marker);


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




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

Hope this helps