ExtJs – Render Google Maps di Ext Container

Sebelumnya mungkin anda sudah tau cara me-render Google Maps di div HTML.
Jika ada yang belum tau mungkin bisa membaca https://developers.google.com/maps/documentation/javascript/reference terlebih dulu.
Namun kali ini saya akan membagi cara me-render Google Maps langsung di container ExtJs.

Ada beberapa hal yang sebelumnya kamu tau,
bahwa sebenarnya container ExtJs juga adalah div HTML yang digenerate oleh ExtJs.
Jadi kita bisa me-render Google Maps tersebut sama seperti kita me-render di HTML.
Untuk me-render di container kita cukup menggunakan document.getElementById(container.getId()) untuk mengambil div dari container tersebut.
Pastikan bahwa kamu me-render Google Maps di event boxready bukan afterrender, karena Google Maps membaca width dan height dari container,
dan jika kamu tau bahwa afterrender tidak memberikan width dan height aktual dibandingkan boxready.
Biasanya saya juga menambahkan event resize pada container tersebut untuk memastikan bahwa Google Maps tersebut bisa mengikuti width dan height terbaru ketika container tersebut di resize.

Kurang lebih seperti berikut :

	var map = null;
	Ext.create('Ext.container.Container', {
			renderTo: target,
			width: 300,
			height: 300,
			listeners : {
				boxready : function(thisCmp) {
					var myOptions = {
							center : new google.maps.LatLng(-3.380111, 118.421327),
							zoom : 5,
							streetViewControl : true,
							scrollwheel : true,
							disableDoubleClickZoom : false,
							draggable : true,
							mapTypeId : google.maps.MapTypeId.HYBRID,
							panControl: false,
							zoomControl: true,
							zoomControlOptions: {
								style: google.maps.ZoomControlStyle.SMALL,
								position: google.maps.ControlPosition.RIGHT_TOP
							}
					};
					
					map = new google.maps.Map(document.getElementById(thisCmp.getId()), myOptions);
				},
				resize : function(thisCmp, width, height, eOpts){
					google.maps.visualRefresh = true;
					try{
						if(map != null){
							google.maps.event.trigger(map, 'resize');
							// jika kamu ingin me-refresh center dari map
							// jika tidak maka bisa dihilangkan code dibawah ini
							var center = map.getCenter();
							map.setCenter(center); 
						}						
					}catch (e) {
						// TODO: handle exception
					}            	
				}
			}
	});

Terima kasih dan semoga bermanfaat.

mazipan-signature

Be a good reader, leave your comment please.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s