README.md

💚 This is the latest document.

HtmlInfoWindow class

This class extends BaseClass.

Contents

• Overview
  • Create a HtmlInfoWindow
  • Display DOM elements
• API Reference

---

Overview

HtmlInfoWindow is able to display any HTML elements on it.

While regular InfoWindow is rendered in map view, HtmlInfoWindow is rendered in browser view.

(click to see in large image)

---

Create a HtmlInfoWindow

var htmlInfoWindow = new plugin.google.maps.HtmlInfoWindow();

var html = [
  'This is <b>Html</b> InfoWindow',
  '<br>',
  '<button onclick="javascript:alert(\'clicked!\');">click here</button>',
].join("");
htmlInfoWindow.setContent(html);

var marker = map.addMarker({
  position: {lat: 0, lng: 0}
});

marker.on(plugin.google.maps.event.MARKER_CLICK, function() {
  htmlInfoWindow.open(marker);
});
marker.trigger(plugin.google.maps.event.MARKER_CLICK);

---

Display DOM elements

The setContent() method accepts either HTML strings or DOM elements.

var htmlInfoWindow = new plugin.google.maps.HtmlInfoWindow();

var iframe = document.createElement("iframe");
iframe.setAttribute("width", "560");
iframe.setAttribute("height", "315");
iframe.setAttribute("src", "https://www.youtube.com/embed/g8jTeS_Ey4A");
iframe.setAttribute("frameboarder", "0");
htmlInfoWindow.setContent(iframe);

var marker = map.addMarker({
  position: {lat: 0, lng: 0}
});

marker.on(plugin.google.maps.event.MARKER_CLICK, function() {
  htmlInfoWindow.open(marker);
});
marker.trigger(plugin.google.maps.event.MARKER_CLICK);

---

API Reference

Create

HtmlInfoWindow()	Add a HTML infoWindow.

Method

setBackgroundColor()	Change the backgroundColor
setContent()	Set your HTML contents.
open()	Open the htmlInfoWindow
close()	Close the htmlInfoWindow

Events

INFO_OPEN	Arguments: none This event is fired when the infoWindow is opened.
INFO_CLOSE	Arguments: none This event is fired when the infoWindow is closed.