Title: add Google Map to tab (dinamically) problem
Post by: BinaryCode on June 06, 2013, 07:22:40 AM
hello,
I have problem when add google map to tab dynamically, the main problem is google map cannot show fullscreen, i have attach image:
below script : /* Add Tab */ function addTab(title,url){ if ($('#tab_container').tabs('exists', title)) { $('#tab_container').tabs('select', title); }else{ $.get(url, function(data) { $('#tab_container').tabs('add',{ title:title, content:data, closable:true }); }); } }
I have use another method (using ifframe) this not working.
Any idea?
Regards B.C
Title: Re: add Google Map to tab (dinamically) problem
Post by: stworthy on June 06, 2013, 08:15:17 AM
Kavin has attached a Google Map example. Please refer to http://www.jeasyui.com/forum/index.php?topic=1559.0
Title: Re: add Google Map to tab (dinamically) problem
Post by: BinaryCode on June 06, 2013, 03:15:57 PM
hello stworthy,
i just look at kevin post, but we have different situation, from kevin sample they use static method ( i have use this and does not have problem), but i want add google map content dynamically, and problem is image cannot full fill all space,
Regards B.C
Title: Re: add Google Map to tab (dinamically) problem
Post by: stworthy on June 06, 2013, 05:55:18 PM
Here is the code changed. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Google Maps Test</title> <link class="jeasycss" rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css" /> <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js" type="text/javascript"></script> <script type="text/javascript"> function createMap(mapDiv){ var gmap, locMarker, locCircle, locPath; options = { center: new google.maps.LatLng(-34.8, 138.6), scaleControl: true, zoom: 9, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: true, navigationControl: true, disableDoubleClickZoom: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN } }; gmap = new google.maps.Map(mapDiv, options); gmap.setOptions({ mapTypeControlOptions: { mapTypeIds: [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID ] } });
locMarker = new google.maps.Marker({ position: new google.maps.LatLng(-34.8, 138.6), map: gmap, title: "A marker" }); locCircle = new google.maps.Circle({ visible: true, map: gmap, radius: 5000, center: new google.maps.LatLng(-34.6, 138.4), fillColor: '#0055ff', fillOpacity: 0.2, strokeColor: '#0055ff', strokeOpacity: 0.8, strokeWeight: 1 }); var polyCoordinates = [ new google.maps.LatLng(-34.2, 138.0), new google.maps.LatLng(-34.4, 138.1), new google.maps.LatLng(-34.5, 138.3) ]; locPath = new google.maps.Polyline({ path: polyCoordinates, strokeColor: "#0072BC", strokeOpacity: 0.8, strokeWeight: 5 }); locPath.setMap(gmap); } function addMap(){ $('#L_centerTabs').tabs('add',{ title:'newtitle' }); var tabs = $('#L_centerTabs').tabs('tabs'); var p = tabs[tabs.length-1]; createMap(p[0]); } $(function(){ addMap(); }); </script> </head> <body class="easyui-layout" style="font-family:Arial,Trebuchet MS,verdana;"> <div region="north" style="height:42px;"> Some heading, logo and menu <br> <a href="#" onclick="addMap()">addmap</a> </div>
<div region="center" style="overflow:hidden;"> <div id="L_centerTabs" class="easyui-tabs" fit="true" border="false"> </div> </div> </body> </html>
Title: Re: add Google Map to tab (dinamically) problem
Post by: BinaryCode on June 09, 2013, 01:54:07 AM
Hello,
Thank for your answer, problem solve now,
Regards, B.C
|