<! DOCTYPE html>
<title>google static Map api</title>
<style type= "Text/css" >
#divStaticMap span
{
Color:gray;
font-size:12px;
}
#divStaticMap. Sel
{
width:130px;
}
</style>
<script type= "Text/javascript" >
function Getobj (ID) {
return document.getElementById (ID);
}
function Getstaticmap () {
var url = ' http://maps.google.com/maps/api/staticmap?center= ';
if (getobj (' Chkusenum '). Checked) {
url = encodeURI (getobj (' txtx '). Value) + ', ' + encodeURI (getobj (' txty '). Value);
}
else {
URL + encodeuri (getobj (' Txtcenter '). Value);
}
url = = ' &zoom= ' + getobj (' Txtzoom '). Value;
url = = ' &size= ' + getobj (' TxtWidth '). Value + ' x ' + getobj (' TxtHeight '). Value;
url = = ' &format= ' + getobj (' Selimagetype '). Options[getobj (' Selimagetype '). Selectedindex].text;
url = = ' &maptype= ' + getobj (' Selmaptype '). Value;
var trs = getobj (' tdflaglist '). getElementsByTagName (' tr ');
for (var i = 1; i < trs.length; i++) {
var txtflagaddress = trs[i].getelementsbytagname (' input ') [0];
if (Txtflagaddress.value = = "") {
Continue
}
var selflagcolor = trs[i].getelementsbytagname (' select ') [0];
var selflagsize = trs[i].getelementsbytagname (' select ') [1];
var Txtflaglabel = trs[i].getelementsbytagname (' input ') [1];
url = ' &markers=size: ' + selflagsize.value;
url = ' |color: ' + selflagcolor.options[selflagcolor.selectedindex].text;
url = ' |label: ' + txtflaglabel.value;
url = = ' | ' + encodeURI (txtflagaddress.value);
}
url = = ' &sensor=false ';
Getobj (' Txtimageurl '). Value = URL;
Getobj (' Imgmap '). src = URL;
Getobj (' Imgmap '). style.display = ' block ';
}
function Addmapflag (o) {
var tr = O.parentnode.parentnode;
var newtr = Tr.parentNode.appendChild (Tr.clonenode (true));
var alist = newtr.getelementsbytagname (' a ');
Alist[0].style.display = ' inline ';
Alist[1].style.display = ' None ';
Newtr.getelementsbytagname (' input ') [0].value = ';
return false;
}
function Delmapflag (o) {
var tr = O.parentnode.parentnode;
Tr.parentNode.removeChild (TR);
TR = null;
return false;
}
function Chkusenum_onclick (o) {
Getobj (' txtx '). Disabled =!o.checked;
Getobj (' txty '). Disabled =!o.checked;
}
</script>
<body>
<!--
Reference Document: http://code.google.com/intl/zh-CN/apis/maps/documentation/staticmaps/
Note that the secondary API does not require key!
Access the Google address by setting an IMG SRC address!
Http://maps.google.com/maps/api/staticmap?center= Xian, bell tower &zoom=14&size=512x512&maptype=hybrid& Sensor=false
-->
<div id= "Divstaticmap" style= "FONT-SIZE:14PX;" >
<table>
<tr>
<TD style= "Vertical-align:top; padding-top:5px; " > Center Location:</td>
<td><input id= "Txtcenter" type= "text" value= "Xian, bell tower"/><br/>
<input id= "chkusenum" type= checkbox "onclick=" Chkusenum_onclick (this); "/><label for=" Chkusenum "> Using warp Latitude: </label><br/>
<input id= "TXTX" type= "text" value= "0" Disabled style= "width:50px;"/> X
<input id= "Txty" type= "text" value= "0" Disabled style= "width:50px;"/>
<span> (latitude -180~180 longitude -90~90) </span>
</td>
</tr>
<tr>
<td> Zoom Level:</td>
<td><input id= "Txtzoom" type= "text" value= "one" style= "width:50px;"/> <span> (0-21) </span> </td>
</tr>
<tr>
<td> Image Size:</td>
<td><input id= "TxtWidth" type= "text" value= "" style= "" width:50px; "/> X
<input id= "TxtHeight" type= "text" value= "" style= "width:50px;"/> <span> (within 640x640) </span></ Td>
</tr>
<tr>
<td> Picture Format:</td>
<td><select id= "Selimagetype" class= "sel" >
<option>jpg</option>
<option>png</option>
<option>png32</option>
<option>gif</option>
<option>jpg-baseline</option>
</select></td>
</tr>
<tr>
<td> Map Type:</td>
<td><select id= "Selmaptype" class= "sel" >
<option value= "Roadmap" > Standard road Map </option>
<option value= "Satellite" > Satellite pictures </option>
<option value= "Terrain" > Natural Terrain </option>
<option value= "hybrid" > Satellite and Road Map </option>
</select></td>
</tr>
<tr>
<TD style= "Vertical-align:top; padding-top:5px; " > Map Mark:</td>
<TD id= "Tdflaglist" >
<table style= "Border:solid 1px gray;" >
<tr style= "FONT-SIZE:12PX; Color:gray; Background-color: #fef; " >
<td> location (address or latitude to | split) </td>
<td> Mark (a-z,0-9) </td>
<td> Color </td>
<td> size </td>
<td> Operations </td>
</tr>
<tr>
<td><input type= "text" value= "Xi ' An, bell tower"/></td>
<td><input type= "text" value= "S" style= "width:80px;"/>
</td>
<td><select>
<option style= "background-color:red;" >red</option>
<option style= "Background-color:black;" >black</option>
<option style= "Background-color:brown;" >brown</option>
<option style= "Background-color:green;" >green</option>
<option style= "background-color:purple;" >purple</option>
<option style= "Background-color:yellow;" >yellow</option>
<option style= "Background-color:blue;" >blue</option>
<option style= "Background-color:gray;" >gray</option>
<option style= "Background-color:orange;" >orange</option>
<option style= "Background-color:white;" >white</option>
</select></td>
<td><select>
<option value= "Mid" > </option>
<option value= "Small" > Small </option>
<option value= "Tiny" > Min </option>
</select></td>
<td>
<a style= "color:red; font-size:12px; Display:none "href=" # "onclick=" Delmapflag (this); > Delete </a>
<a style= "Color:blue; font-size:12px "href=" # "onclick=" Addmapflag (this); > Add </a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td><input type= "button" value= "Get" onclick= "Getstaticmap ();"/>
</td>
</tr>
</table>
Picture address: <input id= "Txtimageurl" type= "text" style= "width:500px;"/><br/>
</div>
<script type= "Text/javascript" >
Getstaticmap ();
</script>
</body>
