(bare minimum version)
How to make jsfiddle work (there are many ways, this works for me)
- Choose "no wrap (body)" under framework
- In the HTML panel: <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div> - In the CSS panel: html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
- In the JavaScript panel: everything in between <script></script>
- Add google.maps.event.addDomListener(window, 'load', initialize); at the end of JavaScript, or window.onload = initialize;
- Click "Run"
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
table { width: 100%; height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function print(txt) { $("console").value += txt + "\n"; }
var map;
var mapOptions = {
center: new google.maps.LatLng(0.0, 0.0),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
function initialize() {
map = new google.maps.Map($("map_canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<table border="0">
<tr>
<td width="70%" valign="top" id="map_canvas">
</td>
<td width="30%" valign="top">
Interaction Form
<form id="form">
text1 <input id="text1" type="text"><br />
text2 <input id="text2" type="text"><br />
text3 <input id="text3" type="text"><br />
<input id="button1" type="button" value="Button 1">
<input id="button2" type="button" value="Button 2">
<input id="button3" type="button" value="Button 3">
<br /><br />
<textarea id="console" cols="30" rows="20"></textarea>
</form>
</td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment