Attaching GMap to Layout Control: How do I add Markers?

Suite and Optimus Suite 5
#1

Just testing how I can add markers to a google map embedded inside a layout control.

Using the sample that came with the code package, all I tried to do was add a marker and the marker will not render.

Here’s my code:

 <link rel="STYLESHEET" type="text/css" href="dhtmlxLayout/codebase/dhtmlxlayout.css">
 <link rel="stylesheet" type="text/css" href="dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_black.css">

 <script type="text/javascript" src="dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
 <script type="text/javascript" src="dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
 <script type="text/javascript" src="dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript" >

	var dhxLayout;
	var map;

	function doOnLoad() {

		dhxLayout = new dhtmlXLayoutObject("parentId", "2U");
		dhxLayout.cells("a").setWidth(120);

		initialize();

		generateMarkers([
			["Camp Nou", 41.3808, 2.1235],
			["Sagrada Familia", 41.40369, 2.17452]
		]);

	}

	function initialize() {

		var latlngSTARTPNT = new google.maps.LatLng(41.39, 2.1492);

		var myOptions = {
			zoom: 13,
			center: latlngSTARTPNT,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			maxZoom: 20,
			zoomControlOptions: {
				style: google.maps.ZoomControlStyle.LARGE
			}
		};

		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		dhxLayout.cells("b").attachMap(map);

	}

	function generateMarkers(locations) {

		for (var i = 0; i < locations.length; i++) {

			new google.maps.Marker({
				position: new google.maps.LatLng(locations[i][1], locations[i][2]),
				map: map,
				title: locations[i][0]
			});
		}
	} 


</script>

<title>dHTMLx Layout Test - Google Map</title>
------------------------------

Any hints on why it’s not working? will the layout control’s attachMap() method support Google markers?

#2

Hello,

attachMap takes map options and returns map instance. So, the approch could be following:

map = dhxLayout.cells(“b”).attachMap(myOptions);

The sample is dhtmlxLayout/samples/04_components/12_gmaps.html