Google Map Marker Info Window

gistfile1.txt

.custom-iw {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  background-color: #0086aa;
  width: auto !important;
  max-width: 253px;
  padding: 16px 26px;
  color: #fff;
  text-align: center;

  &::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 50%;
    margin-left: -15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 15px;
    border-color: #0086aa transparent transparent transparent;
  }

  h2 {
    color: #ffffff;
    font-family: Lato;
    font-size: 17px;
    font-weight: 700;
  }

  p {
    color: #ffffff;
    font-family: Lato;
    font-size: 13px;
    font-weight: 400;
  }

  & > div:first-of-type {
    display: none;
    background-color: #0086aa;
  }

  & > div:nth-of-type(2) {
    position: static !important;
  }

  & > div:last-of-type {
    display: none;
  }
}

.gm-style-iw {
  width: auto !important;
}

js

if (typeof google !== "undefined"){
        google.maps.event.addDomListener(window, 'load', function(){
            $(".map-canvas").each(function(){
                var
                    map = $(this),
                    position = new google.maps.LatLng(map.data("latitude"), map.data("longitude")),
                    map = new google.maps.Map(this, {
                        zoom: 17,
                        center: position,
                        disableDefaultUI: true,
                        clickableIcons: false,
                    });
                var marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    // icon: "images/marker.png",
                    disableDefaultUI: true,
                });


                var title = $(".map-canvas").data("title");
                var text = $(".map-canvas").data("text");
                var markerContent = "<h2>" + title + "</h2>" + "<p>" + text +"</p>";

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

                infowindow.open(map, marker);
                marker.setVisible(false);

                google.maps.event.addListener(infowindow,'domready',function(){
                    $('.gm-style-iw').parent().addClass('custom-iw');
                });
            });
        });
    };