Back

Creating Infowindow

In order to create an info window, call the CreateInfoWindow method of the map object like this:

 map.CreateInfoWindow(content, lat, lng, show)

content String
Optional. The content to display in the info window.
lat Number
Optional. The latitude of the position of the anchor of the info window.
lng Number
Optional. The longitude of the position of the anchor of the info window.
show Boolean
Optional. Whether to show or hide the info window when created. Default is false.

This will return an infowindow object.


Creating an infowindow

app.LoadPlugin("MapView");

var lat = 7.0689323;
var lng = 125.6114588;

function OnStart() {
    lay = app.CreateLayout("Linear", "VCenter, FillXY");
        
        var apiKey = "AIzaSyD2eHntKEmh272p3ac6YjWPbPkwo3m2mck";
        
        map = app.CreateMapView(apiKey, 0.9, 0.5, lat, lng, 13);
        map.SetOnReady(MapOnReady);
        lay.AddChild(map);

    app.AddLayout(lay);
}
function MapOnReady() {
    var content = "This is the content of the infowindow. You can set the content by calling the SetContent() method of the info window object.";
    infowindow = map.CreateInfoWindow(content, lat, lng, true);
}
Copy    Run   

Attached info window to a marker

app.LoadPlugin("MapView");

var lat = 7.0689323;
var lng = 125.6114588;
var map, infowindow, marker;

function OnStart() {
    lay = app.CreateLayout("Linear", "VCenter, FillXY");
        
        var apiKey = "AIzaSyD2eHntKEmh272p3ac6YjWPbPkwo3m2mck";
        
        map = app.CreateMapView(apiKey, 0.9, 0.5, lat, lng, 13);
        map.SetOnReady(MapOnReady);
        lay.AddChild(map);

    app.AddLayout(lay);
}
function MapOnReady() {
    marker = map.CreateMarker(lat, lng, true);
    marker.AddListener("click", "ShowInfowindow");

    var content = "This is the content of the infowindow. You can set the content by calling the SetContent() method of the info window object.";
    infowindow = map.CreateInfoWindow(content);
}
function ShowInfowindow() {
    infowindow.Open(marker);
}
Copy    Run   

Primary methods

 Open(marker) Optional marker object
 Close()
 Remove()

You can review for the definitions of the methods below at google map Infowindow class.

Setters

Below are the available setters for you to customize your infowindow the way you want.

 SetContent(content) String
 SetOptions(options) Object
 SetPosition(boolean)
 SetZIndex(number)

Getters

Below are the available getters of the infowindow object.
Note: All the getter functions are asynchronous. Therefore you are required to pass a callback function.

 GetContent(callback)
 GetPosition(callback)
 GetZIndex(callback)

Event listener

A very usefull method of the infowindow object.
'event' and 'callback' parameter is a string

 AddListener(event, callback, elementId)

Available events
closeclick, content_changed, domready, position_changed, zindex_changed. You can also add event listener to a button or any element on the info-window by passing the element id as the third argument.

This will return a stringified object. So before you can use the object, parse it first.


On close event

app.LoadPlugin("MapView");

function OnStart() {
    lay = app.CreateLayout("Linear", "VCenter, FillXY");
        
        var apiKey = "AIzaSyD2eHntKEmh272p3ac6YjWPbPkwo3m2mck";
        
        map = app.CreateMapView(apiKey, 0.9, 0.5, 7.0689323, 125.6114588);
        map.SetOnReady(MapOnReady);
        lay.AddChild(map);

    app.AddLayout(lay);
}
function MapOnReady() {
    var content = "This is the content of the info window.";
    ifw = map.CreateInfoWindow(content, 7.0689323, 125.6114588, true);
    ifw.AddListener("closeclick", "InfoWindowClose");
}
function InfoWindowClose(e) {
    app.ShowPopup('You close me!');
    console.log(e);
}
Copy    Run   

With button click event

app.LoadPlugin("MapView")

function OnStart()
{
    lay = app.CreateLayout("Linear", "VCenter, FillXY")
        
        var apiKey = "AIzaSyD2eHntKEmh272p3ac6YjWPbPkwo3m2mck"
        
        map = app.CreateMapView(apiKey, 0.9, 0.5, 7.0689323, 125.6114588)
        map.SetOnReady(MapOnReady)
        lay.AddChild(map)

    app.AddLayout(lay)
}

function MapOnReady()
{
    var content = "This is the content of the info window. "
    ifw = map.CreateInfoWindow(content, 7.0689323, 125.6114588, true)
    ifw.AddListener("closeclick", "InfoWindowClose")
    ifw.AddListener("onclick", "onButtonClick", "btn-id")
}

function onButtonClick()
{
    app.ShowPopup( "Button on info window is click" )
}
Copy    Run