You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
2.3 KiB
60 lines
2.3 KiB
2 years ago
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Google Maps Widget Demo</title>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var djConfig={
|
||
|
|
isDebug: true,
|
||
|
|
debugAtAllCosts:true,
|
||
|
|
// http://localhost/dojo/
|
||
|
|
googleMapKey:"ABQIAAAAOQlMNe3AWkq27kRV3hWmghQyacgg3RW3kBqapZchmVLUYsjpkBQx9YjRzQ1EjBYEE7r0vXMZFfrAdA"
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript" src="../../dojo.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
dojo.require("dojo.widget.GoogleMap");
|
||
|
|
</script>
|
||
|
|
<script>dojo.hostenv.writeIncludes();</script>
|
||
|
|
<style type="text/css">
|
||
|
|
.map{
|
||
|
|
width:100%;
|
||
|
|
height:480px;
|
||
|
|
border:1px solid black;
|
||
|
|
}
|
||
|
|
#pos{
|
||
|
|
position:absolute;
|
||
|
|
bottom:0;
|
||
|
|
left:0;
|
||
|
|
width:200px;
|
||
|
|
height:200px;
|
||
|
|
}
|
||
|
|
#mapTest2{
|
||
|
|
width:100%;
|
||
|
|
height:100%;
|
||
|
|
border:1px solid black;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Dojo Google Map Widget</h1>
|
||
|
|
<p>This is an example of the Dojo Google Map widget. Note that you have to include your own Google Map API script tag at the top of your document, with your own API key.</p>
|
||
|
|
<div dojoType="googlemap" id="mapTest" class="map" datasrc="mapData"></div>
|
||
|
|
<table id="mapData">
|
||
|
|
<thead><tr><th>Lat</th><th>Long</th><th>Icon</th><th>Description</th></tr></thead>
|
||
|
|
<tbody>
|
||
|
|
<tr><td>37.4419</td><td>-122.14193</td><td></td><td><div>This is the first place on the map.</div></td></tr>
|
||
|
|
<tr><td>37.42189</td><td>-122.084692</td><td></td><td><div>This is the second place on the map.</div></td></tr>
|
||
|
|
<tr><td>37.3318</td><td>-122.029009</td><td></td><td><div>This is the third place on the map.</div></td></tr>
|
||
|
|
<tr><td>37.832912</td><td>-122.284055</td><td></td><td><div>This is the fourth place on the map.</div></td></tr>
|
||
|
|
<tr><td>37.688643</td><td>-122.0703753</td><td></td><td><div>This is the fifth place on the map.</div></td></tr>
|
||
|
|
<tr><td>37.413775</td><td>-122.060369</td><td></td><td><div>This is the sixth place on the map.</div></td></tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<h2>More tests: the Google Geocoder!</h2>
|
||
|
|
<input type="button" value="Plot the Dojo Foundation Offices" onclick="dojo.widget.byId('mapTest2').plotAddress('1000 Elwell Ct., Palo Alto, CA 94303');return false;" />
|
||
|
|
<div style="position:relative;height:240px;">
|
||
|
|
<div id="pos"><div dojoType="googlemap" id="mapTest2" controls="smallmap"></div></div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|