Info Window explained
Updated: Jun 5, 2007
Views: 11286
Description: This tutorial will show you how to use the info window with the GMap Flash component.
| Download source files |
The info window allows you to display plain or HTML formatted text with links and images. The appearance of the info window can be customized through an array or properties.
 |
As you can see in the example above, all of the elements of the Info Window can be adjusted. Let's go ahead and create a simple information window.
// add a point
var point = gMap.addPoint({lat:48.858842,lng:2.346997, name:"Paris, France"});
// add event responder function
// this function will get triggered once the point is clicked
function eventResponder(evnt){
evnt.target.openInfoWindow({title:evnt.target.name});
}
// add event listener
point.addEventListener("GEOMETRY_ON_RELEASE", eventResponder);
var point = gMap.addPoint({lat:48.858842,lng:2.346997, name:"Paris, France"});
// add event responder function
// this function will get triggered once the point is clicked
function eventResponder(evnt){
evnt.target.openInfoWindow({title:evnt.target.name});
}
// add event listener
point.addEventListener("GEOMETRY_ON_RELEASE", eventResponder);
| |
As you can see from the example above, we used the openInfoWindow method to open the window and passed a point's name as the window's title. In addition to the title parameter, you can pass content text which will be displayed in the body of the window.
// add point
var point = gMap.addPoint({lat:48.858842,lng:2.346997, name:"Paris, France", description:"Bnojour!"});
function eventResponder(evnt){
evnt.target.openInfoWindow({title:evnt.target.name, content:evnt.target.description, contentAutoSize:true});
}
// add event listener
point.addEventListener("GEOMETRY_ON_RELEASE", eventResponder);
var point = gMap.addPoint({lat:48.858842,lng:2.346997, name:"Paris, France", description:"Bnojour!"});
function eventResponder(evnt){
evnt.target.openInfoWindow({title:evnt.target.name, content:evnt.target.description, contentAutoSize:true});
}
// add event listener
point.addEventListener("GEOMETRY_ON_RELEASE", eventResponder);
| |
In the example above, we used two new parameters content and contentAutosize. Content defines text for the window's body and contentAutoSize makes sure that the window is resized automatically. You can also apply HTML formatting to the window's title and content by setting contentHTML:Boolean and titleHTML:Boolean to true.
Modifying the window's appearance is just as easy. Let's create a semi transparent black window with no border and no rounded corners.
// add point
var point = gMap.addPoint({lat:48.858842,lng:2.346997, name:"Paris, France", description:"Bnojour!"});
function eventResponder(evnt){
evnt.target.openInfoWindow({title:evnt.target.name, content:evnt.target.description, contentAutoSize:true, titleRGB:0xFFFFFF, contentRGB:0xCCCCCC,radius:0, stroke:false, fillRGB:0x000000, fillAlpha:70});
}
// add event listener
point.addEventListener("GEOMETRY_ON_RELEASE", eventResponder);
var point = gMap.addPoint({lat:48.858842,lng:2.346997, name:"Paris, France", description:"Bnojour!"});
function eventResponder(evnt){
evnt.target.openInfoWindow({title:evnt.target.name, content:evnt.target.description, contentAutoSize:true, titleRGB:0xFFFFFF, contentRGB:0xCCCCCC,radius:0, stroke:false, fillRGB:0x000000, fillAlpha:70});
}
// add event listener
point.addEventListener("GEOMETRY_ON_RELEASE", eventResponder);
| |
That is about it. For a complete list component's methods and events please see API Documentation. If you have any questions please post them on our forum.
