how to style Google map info window using css or javascript

Question

I am using Google's mysql/ajax/php map search example. I am tying to style the info window with css, but it's not working. Here is the example code

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>PHP/MySQL & Google Maps Example</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxx"
            type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    var customIcons = {
      Event_Organisers: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
      } 
    };

    var map = null, marker = null;

    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(17.4121,78.1278),
        zoom: 13,
        mapTypeId: 'roadmap'

      });
      var infoWindow = new google.maps.InfoWindow;
      // Change this depending on the name of your PHP file
      downloadUrl("xmloutput.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);


      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    //]]>

  </script>
 <style>

 </style>
  </head>

  <body onload="load()">
    <div id="map" style="width: 550px; height: 250px;"></div>
  </body>

</html>

is there any way to style info window use css or javascript.

please see the below css

.infoWindow {
    display:none;
}
.infoWindow {
    border:2px solid black;
    margin-top: 8px;
    background:#333;
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding: .5em 1em;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-shadow:0 -1px #000000;
    -webkit-box-shadow: 0 0  8px #000;
    box-shadow: 0 0 8px #000;
}

Show us your css; posting only the example html code doesn't help us help you — Sjon, Apr 22 '16 at 07:41

score 0 · Answer 1 · answered Apr 22 '16 at 08:28

Assuming you applied your class 'infoWindow' correctly to your map element, what I believe is happening is that your CSS class is overwritten by the CSS in the load() function's response from the Google API.

If you're using Chrome as a browser, right click your element with the class 'infoWindow' and select 'Inspect' (after the page has loaded).

If you don't see the expected CSS properties there, then you need to apply your custom CSS after the map has loaded. For example, JQuery has a function for this: https://api.jquery.com/addclass/

how to style Google map info window using css or javascript

1 Answers1