README.md

⚠️ This document is aim for older versions (from 2.0.0 to 2.2.9). Document for new version is https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.6.0/README.md

---

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);

map.addMarker({
  position: {lat: 0, lng: 0},
  draggable: true
}, function(marker) {

  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);

map.addMarker({
  position: {lat: 0, lng: 0}
}, function(marker) {

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

});

---

API Reference

Create

new plugin.google.maps.HtmlInfoWindow	Add a HTML infoWindow.

Method

setBackgroundColor	Change the backgroundColor
setContent(string|node)	Set your HTML contents.
open(marker)	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.