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..

    Japanese Text not showing correctly

    How to set date search toolbar field width on autoresize

    CSS HTML how to remove whole cell links in tables?

    How to remove jquery mobile button color or override button css?

    how to create 3 columns in HTML+CSS and group 2 div elements in the third column

    How to implement dynamic layout columns by using the `content_for?` method?

    How to put borders closer to the text and image and make background gray in CSS?

    how do you add footer? like all right's reserved for a CSS design?

    How to access the set qt stylesheet properties (css like grammar), or is there an css to xml converter?

    How can I use jQuery (or CSS) to sort HTML tables by column?

    How to add a value in the y-axis at the bottom of a bar chart-css

    How to give effect on dragging in css or through jquery

    How can I resize an image, added via ajax, to fit within specific dimensions while maintaining aspect ratio using JQuery/CSS?

    Angular. How to set css properties for “after” and “before” DOM psuedo elements

    How to keep text in the middle of the screen even when re-sizing page in html/css

    Using CSS, how can I make my document expand to the user's viewport if the content doesn't scroll?

    How to animate my element in my case?

    How to change active tab to first css

    How to create a CSS box link without using display: block

    css google font how to download and embedd in css to avoid slow load times

    How can I make my web application look correct in IE 8 and 9? [closed]

    How to set minimum height for a div?

    How to render css file from url in to the webview in android

    How to apply different css style to gwt datagrid widget in the same page? [duplicate]

    How to overlay a play button over a thumbnail image using only CSS

    How to effectively use the Frameless grid?

    CSS: How to position a div in the center with dynamic width

    How to get a list of css attributes of an element with jquery

    How to make an overflow hidden only for box-shadow

    How to select only one child element in CSS?