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


Tags: javascript,css,google-maps,google-maps-api-3

Problem :

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


Solution :

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


    CSS Howto..

    How to reset the style properties to their CSS defaults in javascript?

    How to comment in-line CSS?

    How to indicate that an LI with a link was pressed.

    how to force 100% height on a dynamic drive css fluid/fixed layout

    How do I get ui-sortable to only work on a specific id in CSS?

    Menu CSS showing current page in a single html file

    How to activate a CSS3 (webkit) animation using javascript?

    How to select 3rd div which has specific css class

    How to change CSS when user scrolls past a certain div

    How to modify CSS when requirements change?

    How to make the table fit to the mobile screen size in css?

    How to hide and show div with button? How to add effect to the button when show the div?

    How To Change Text Box Content On Hover

    HTML5 / CSS| How do I disable responsivity when a scroll bar appears?

    How do I prevent this double hover?

    How fixed a navigation to the center on scroll?

    How to use css with jsp's

    How to force CSS @media style from JS regardless of screen size?

    Pesudo Class and Css Role how to apply theme

    How to change the location of my yt video ( I want to move it approximately 10 cm down and 10cm to the right so that it doesnt clash)

    How to select elements using CSS selector who's attribute can have multiple values

    How to change the Fill color of an SVG path via CSS

    Way of Determining How Many Style Rules I have

    How to change an image on mouseover of wrapper div

    How to Make CSS3 Columns Display Properly [closed]

    How to set control properties in css?

    How to define different css based on element changing number

    How to center two blocks with some gap inbetween using CSS?

    How to properly use css will-change property?

    How to make line-through wider/bigger than text/element using CSS