Creating custom infowindow in google map

Question

i am trying to create a custom info window in my google map i find a specific code in the internet but i want to ask if the default library contains a predefined code to do this :

 var infowindow = new google.maps.InfoWindow();
             google.maps.event.addListener(infowindow, 'domready', function () {
                 var l = $('#hook').parent().parent().parent().siblings();
                 for (var i = 0; i < l.length; i++) {
                     if ($(l[i]).css('z-index') == 'auto') {
                         $(l[i]).css('border-radius', '16px 16px 16px 16px');

                     }
                 }
             });

          var point = new google.maps.LatLng(long, lat);
                 var marker = new google.maps.Marker({ 'position': point, 'map': map });

                 google.maps.event.addListener(marker, 'mouseover', (function (marker, iLoop) {
                     return function () {
                         infowindow.setContent("<p id='hook'>" + d + "</p>");
                         infowindow.open(map, marker);
                     }
                 })(marker, iLoop));

basically what i am doing is going through all parents to reach the pop up is there any other way ?

Answer 1

var infowindow = new google.maps.InfoWindow({
  content : "<div></div>"
});
google.maps.event.addListener(infowindow, "domready", function () {
  var popup = $(this.k.contentNode).closest(".gm-style-iw").parent()
    .empty().css({
      width  : "",
      height : "",
      cursor : ""
    })
    .addClass("popup");
});
google.maps.event.addListener(marker, "click", function () {
  infowindow.open(map, this);
});

You can change $(this.k.contentNode).closest(".gm-style-iw").parent() to detect right block in your map. This can be different in major versions of google maps api.

Popup will obtain left, top and z-index automatically when marker changes position.

PS Do not use defective infobox. It's not from the api. This is a third party defective hack written by crooked coders. It "extends" OverlayView

1. It uses many private variables and methods directly. You will obtain a big pain in new major version of api.
2. It forces you to use fixed html included in js.
3. It forces you to include css in your js. I am laughing with "boxStyle", "closeBoxMargin", "closeBoxURL" and others.

Answer 2

Styling the infowindow is not possible. When using infowindow the only thing you can style is the content that you put inside by giving styles in the tags inside. You must use infobox instead of infowindow. That is a component that you can style by giving values to the available attributes. Following code is an example

var marker = new google.maps.Marker({
         map: theMap,
         draggable: true,
         position: new google.maps.LatLng(49.47216, -123.76307),
         visible: true
        });

        var boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
        boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

        var myOptions = {
                 content: boxText
                ,disableAutoPan: false
                ,maxWidth: 0
                ,pixelOffset: new google.maps.Size(-140, 0)
                ,zIndex: null
                ,boxStyle: { 
                  background: "url('tipbox.gif') no-repeat"
                  ,opacity: 0.75
                  ,width: "280px"
                 }
                ,closeBoxMargin: "10px 2px 2px 2px"
                ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                ,infoBoxClearance: new google.maps.Size(1, 1)
                ,isHidden: false
                ,pane: "floatPane"
                ,enableEventPropagation: false
        };

        var ib = new InfoBox(myOptions);
        ib.open(theMap, marker);

Check here for more