Hi, I'm trying to generate a frame around the map by using css. Basicly it's like: <div class="frame"> <div google maps/earth></div> </div> Unfortunatly while switching between maps and earth the frame size changes in unpredictable way. Below is sample code. It can be pasted directly into API playgroud (http://code.google.com/apis/ajax/playground/#maps/earth_integration) Maps/Earth integration in Edit Html mode. (Style I used style is from my website)
The problem occurs in FireFox 3.6. It seems that in Safari it's OK. How could it be fixed in Firefox though? Also note that the frame is working fine if Earth plugin is not used. <!-- Copyright (c) 2009 Google inc. You are free to copy and use this sample. License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/ > <title>Google Earth API Sample</title> <script src="http://www.google.com/jsapi? key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></ script> <script type="text/javascript"> var map; var ge; google.load("maps", "2.x"); function init() { map = new GMap2(document.getElementById('map3d')); map.setCenter(new GLatLng(37, -122), 12); var mapui = map.getDefaultUI(); mapui.maptypes.physical = false; map.setUI(mapui); // add 'Earth' as one of the map types map.addMapType(G_SATELLITE_3D_MAP); // create a marker var marker = new GMarker(new GLatLng(37, -122)); GEvent.addListener(marker, "click", function() { var html = '<div style="width: 210px; padding-right: 10px">Hello world!</div>'; marker.openInfoWindowHtml(html); }); map.addOverlay(marker); google.maps.Event.trigger(marker, "click"); // create a polyline (LineString Placemark in KML) var polyline = new GPolyline([ new GLatLng(37.04, -122.04), new GLatLng(37.02, -122.02), new GLatLng(37.03, -122.01), new GLatLng(37.01, -121.99) ], "#ff0000", 10); map.addOverlay(polyline); // do stuff with Earth when the user switches to it GEvent.addListener(map, 'maptypechanged', function() { if (ge) { setTimeout("doStuffWithEarth()",100); return; } map.getEarthInstance(function(pluginInstance) { ge = pluginInstance; doStuffWithEarth(); }); }); } function doStuffWithEarth() { document.getElementById('installed-plugin-version').innerHTML = ge.getPluginVersion().toString(); ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true); ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true); ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, true); } </script> </head> <body onload="init()" style="font-family: arial, sans-serif; font- size: 13px; border: 0;"> <div style="position: relative; display: table; padding: 4px 4px 4px 4px; border: 1px dotted #ae9d81; background: #f4efe6; margin: -1px 0 15px 0; width: 429px; height: 402px;"> <div id="map3d" style="width: 427px; height: 400px;"></div> </div> <br> <div>Installed Plugin Version: <span id="installed-plugin-version" style="font-weight: bold;">Loading...</span></div> </body> </html> -- You received this message because you are subscribed to the Google Groups "Google Maps API" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-maps-api?hl=en.
