JavaScript functions

We have included some JavaScript functions to make it easier to use various funtions of the Google Maps API. Below you can find a description of them.

showInfoWindow

This function opens the info window of a marker. This function has one parameter: the id of the marker.

Code

<h:commandButton value="Open info window" onclick="showInfoWindow('marker2');" />

Top

hideInfoWindow

This function closes any info window that's visible on the map. This method takes no parameters.

Code

<h:commandButton value="Close info window" onclick="hideInfoWindow();" />

Top

openInfoWindowAt

This function opens a infowindow at the specified position with the text in it. It does not need a marker to open one. This method has 3 parameters: the latitude, longitude and the id of the marker.

Code

<rd:map mapId="map_canvas" width="700px" height="500px" key="abcdefg" onload="openInfoWindowAt(50.9955609, 3.6847499, 'Hello');" />

Top

removeMarker

This function removes a specified marker from the map. It has one parameter: the id of the marker to be removed.

Code

<h:commandButton value="remove marker" onclick="removeMarker('marker3');" />

Top

DummyMarker

This is not a function, but a class. You can use it to add markers to your page using javascript instead of the traditional <marker /> tag. It's constructor takes 7 parameters: id, name, address, city, country, latitude and longitude. You can then add several other properties to the object. Below is a list of possible properties. When you have set all properties, you can call the function yourDummyMarker.createMarker(). This will put a marker on the map with the specified options.

Code

<ui:define name="content">
	<script type="text/javascript">
		function doCreateMarker(){
			var dmarker = new DummyMarker("marker3", "Office Harelbeke", "Kortrijksesteenweg 307" 
					,"8530 Harelbeke", "Belgium",50.8430976, 3.2920447);
			dmarker.infoWindowText = "<b>Office Harelbeke</b><br />" + dmarker.address + "<br />" + 
					dmarker.city;
			dmarker.searchValue="Office Harelbeke";
			dmarker.iconLink="img/RDMarker.png";
			dmarker.createMarker();
		};
		
	</script>
		<rd:map	mapId="map_canvas" width="700px" height="500px" key="abcdefg" autoCenter="true" 
			showDirections="false" onload="openInfoWindowAt(50.9955609, 3.6847499, 'BAM');">
				
			<rd:marker name="Headquarters Huizingen" id="marker1" address="A. Vaucampslaan 42" 
				city="1654 Huizingen" latitude="50.7520688" longitude="4.2634274"
				searchValue="Headquarters Huizingen" iconLink="img/RDMarker.png">
				<rd:infoWindow for="marker1"
					text="<b>Headquarters Huizingen</b><br />A. Vaucampslaan 42<br />1654 Huizingen<br />" />
			</rd:marker>
			<rd:marker name="Office Kontich Boudewijnlaan" id="marker2"	address="Prins Boudewijnlaan 26" 
				city="2550 Kontich" latitude="51.1410521" longitude="4.4378872"
				searchValue="Office Kontich Boudewijnlaan" iconLink="img/RDMarker.png">
				<rd:infoWindow for="marker2"
					text="<b>Office Kontich Boudewijnlaan</b><br />Prins Boudewijnlaan 26<br />2550 Kontich<br />" />
			</rd:marker>
		</rd:map>
		<h:commandButton value="Create a new marker!" onclick="doCreateMarker();" />
</ui:define>

Properties

Name Description Data type Standard Value
infoWindowText The text to be displayed in this markers info window. string
address The street and housenumber of the marker. string
city The (postal code and) name of the city of the marker. string
country The full name or abbreviation of the country of the marker. string
iconAnchorX The x-value of the pixel coordinate relative to the top left corner of the icon image at which this icon is anchored to the map. integer 9
iconAnchorY The y-value of the pixel coordinate relative to the top left corner of the icon image at which this icon is anchored to the map. integer 34
iconHeight the height of the icon’s image integer 34
iconLink The url to the icons’ image if a different image is desired. string
iconWidth The width of the icons’ image integer 20
id The unique id of the marker. string
infoShadowAnchorX The x-value of the pixel coordinate relative to the top left corner of the icon image at which the info window’s shadow is anchored to this icon. integer
infoShadowAnchorY The y-value of the pixel coordinate relative to the top left corner of the icon image at which the info window’s shadow is anchored to this icon. integer
infoWindowAnchorX The x-value of the pixel coordinate relative to the top left corner of the icon image at which the info window is anchored to this icon. integer 9
infoWindowAnchorY The y-value of the pixel coordinate relative to the top left corner of the icon image at which the info window is anchored to this icon. integer 2
latitude If you already have the coordinates for the marker, you can add its latitude. If this is filled in together with longitude, the Google Webservice won’t be called. decimal
longitude If you already have the coordinates for the marker, you can add its longitude. If this is filled in together with latitude, the Google Webservice won’t be called. decimal
name Name of this marker, used to display in the search results and in the infowindow of the clusterer string
searchValue When search is enabled, the search method will look in this value to find suitable markers string
shadowHeight the height of the shadows’ image integer 34
shadowLink The url to an image of the icons’ shadow string
shadowWidth the width of the shadows’ image integer 37
clickable Specify whether or not the user can click on the marker. boolean true
onclick This event is fired when the marker icon was clicked. String
ondblclick This event is fired when the marker icon was double-clicked. String
onmousedown This event is fired when the DOM mousedown event is fired on the marker icon. String
onmouseup This event is fired when the DOM mouseup event is fired on the marker icon. String
onmouseover This event is fired when the mouse enters the area of the marker icon. String
onmouseout This event is fired when the mouse leaves the area of the marker icon. String
oninfowindowopen This event is fired when the info window of this marker was opened through this marker. String
oninfowindowbeforeclose This event is fired before the info window of this marker is closed through this marker. String
oninfowindowclose This event is fired when the info window of this marker is closed through this marker. String

Top

showMarker

This function makes a hidden marker visible. It has one parameter: the id of the marker to show.

Code

<h:commandButton value="Show marker!" onclick="showMarker('marker3');" />

Top

hideMarker

This function hides a marker. It has one parameter: the id of the marker to hide.

Code

<h:commandButton value="Hide marker!" onclick="hideMarker('marker3');" />

Top

getPolyline

This function returns the GPolyline object with the given id.

Function signature

getPolyline(id*);

Top

createPolyline

This function creates a polyline on the map. Note that you need to provide at least 2 GLatLng objects in the array.

Function signature

createPolyline(id:string*, latLngArray:array*, color:string, weight:number, opacity:number, clickable:boolean, geodesic:boolean, mouseOutTolerance:number, onremove:string, onvisibilitychanged:string, onclick:string, onmouseover:string, onmouseout:string, onlineupdated:string, onendline:string, oncancelline:string)

The latLngArray-parameter must contain an array of GLatLng objects. For an explanation of the other parameters, please see the API.

Code

<script type="text/javascript">
	function doClick(){
		var arr = [];
		arr.push(new GLatLng(50.7520688,4.2634274));
		arr.push(new GLatLng(51.1410521,4.4378872));
		arr.push(new GLatLng(50.8470177,4.352505));
		arr.push(new GLatLng(50.9955609,3.6847499));
		arr.push(new GLatLng(50.8430976,3.2920447));
		arr.push(new GLatLng(51.019571,5.3599932));
		arr.push(new GLatLng(51.1401392,4.4382415));
		arr.push(new GLatLng(51.1414364,4.441827));
		createPolyline("pl1", arr, "#0000FF", 5, 0.5, true, false, "", 
				"", "", "", "", "", "", "", "");
	};	
</script>
...
<h:commandButton value="Click" onclick="doClick();" />

Top

removePolyline

With this function you can remove a polyline.

Function signature

removePolyline(polylineId:string*)

Top

addPointToPolyline

With this function you can add new points to an already existing polyline.

Function signature

addPointToPolyline(polylineId:string*, latitude:number*, longitude:number*, position:number)

The position attribute is to specify on what position the point must be inserted in the polyline. Leave it blank to add it to the end of the polyline.

Top

removePointFromPolyline

With this function you can remove a point from the polyline with id 'polylineId'.

Function signature

addPointToPolyline(polylineId:string*, position:number)

The position attribute is to specify wich point must be removed. Leave it blank to remove the last point in the line.

Top

showPolyline

With this function you can make a hidden polyline visible.

Function signature

showPolyline(polylineId:string*)

Top

hidePolyline

With this function you can hide a polyline.

Function signature

hidePolyline(polylineId:string*)

Top

enableDrawingPolyline

With this function you can enable drawing on an existing polyline. This enables you to add extra lines to the polyline. Drawing can be terminated by double-clicking or click again on the latest point added.

Function signature

enableDrawing(polylineId:string*, drawFromStart:boolean)

The drawFromStart:boolean parameter specifies whether enableDrawing should add points from the start rather than from the end, which is the default.

Top

enableEditingPolyline

With this function you can edit an existing polyline.

Function signature

enableEditing(polylineId:string*)

Top

disableEditingPolyline

With this function you can make a polyline back uneditable.

Function signature

disableEditing(polylineId:string*)

Top

getPolygon

This function returns the GPolygon object with the given id.

Function signature

getPolygon(id*);

Top

createPolygon

This function creates a polygon on the map.

Function signature

createPolygon(id:string*, points:array*, strokeColor:string, strokeWeight:number, strokeOpacity:number, fillColor:string, fillOpacity:number, clickable:boolean, mouseOutTolerance:number, onremove:string, onvisibilitychanged:string, onclick:string, onmouseover:string, onmouseout:string, onlineupdated:string, onendline:string, oncancelline:string)

The points-parameter must contain an array of GLatLng objects. For an explanation of the other parameters, please see the API.

Code

<script type="text/javascript">
	function doClick(){
		var points = [];

			points.push(new GLatLng(50.943704737090826, 2.84820556640625));
			points.push(new GLatLng(50.8059202661327, 3.044586181640625));
			points.push(new GLatLng(50.73296396507139, 2.931976318359375));
			points.push(new GLatLng(50.728617739899384, 2.72186279296875));
			points.push(new GLatLng(50.806788108266225, 2.638092041015625));
			points.push(new GLatLng(50.91167804783163, 2.673797607421875));

			createPolygon("pol", points);
	};	
</script>
...
<h:commandButton value="Click" onclick="doClick();" />

Top

removePolygon

With this function you can remove a polygon.

Function signature

removePolygon(polygonId:string*)

Top

addPointToPolygon

With this function you can add new points to an already existing polygon.

Function signature

addPointToPolygon(polygonId:string*, latitude:number*, longitude:number*, index:number)

The position attribute is to specify on what position the point must be inserted in the polygon. Leave it blank to add it to the end of the polygon.

Top

removePointFromPolygon

With this function you can remove a point from the polygon with id 'polygonId'.

Function signature

addPointToPolygon(polygonId:string*, index:number)

The position attribute is to specify wich point must be removed. Leave it blank to remove the last point in the polygon.

Top

showPolygon

With this function you can make a hidden polygon visible.

Function signature

showPolygon(polygonId:string*)

Top

hidePolygon

With this function you can hide a polygon.

Function signature

hidePolygon(polygonId:string*)

Top

enableEditingPolygon

With this function you can edit an existing polygon.

Function signature

enableEditing(polygonId:string*)

Top

disableEditingPolygon

With this function you can make a polygon back uneditable.

Function signature

disableEditing(polygonId:string*)

Top