Copy codeThe Code is as follows:
<Link href = "css/jquery.ui.base.css" rel = "stylesheet" type = "text/css"/>
<Link href = "css/jquery.ui.theme.css" rel = "stylesheet" type = "text/css"/>
<Script src = "http://maps.google.com/maps/api/js? Sensor = false "type =" text/javascript "> </script>
<Script src = "js/jquery-1.9.1.js" type = "text/javascript"> </script>
<Script src = "js/jquery. mousewheel. js" type = "text/javascript"> </script>
<Script src = "js/jquery. ui. core. js" type = "text/javascript"> </script>
<Script src = "js/jquery. ui. widget. js" type = "text/javascript"> </script>
<Script src = "js/jquery. ui. button. js" type = "text/javascript"> </script>
<Script src = "js/jquery. ui. spinner. js" type = "text/javascript"> </script>
<Link href = "css/demos.css" rel = "stylesheet" type = "text/css"/>
<Script type = "text/javascript">
$ (Function (){
Function latlong (){
Return new google. maps. LatLng ($ ("# lat"). val (), $ ("# lng"). val ());
}
Function position (){
Map. setCenter (latlong ());
}
$ ("# Lat, # lng"). spinner ({
Step:. 001,
Change: position,
Stop: position
});
Var map = new google. maps. Map ($ ("# map") [0], {
Zoom: 8,
Center: latlong (),
MapTypeId: google. maps. MapTypeId. ROADMAP
});
});
</Script>
<Style type = "text/css">
# Map {
Width: 500px;
Height: 500px;
}
</Style>
</Head>
<Body>
<Label for = "lat"> latitude </label>
<Input id = "lat" name = "lat" value = "44.797"/>
<Br>
<Label for = "lng"> longitude </label>
<Input id = "lng" name = "lng" value = "-93.278"/>
<Div id = "map"> </div>
<Div class = "demo-description">
</Div>