Skip to content

Latest commit

 

History

History
123 lines (92 loc) · 3.11 KB

File metadata and controls

123 lines (92 loc) · 3.11 KB

⚠️ This document is aim for older versions (from 2.3.0 to 2.5.3). 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

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.