1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>
7 无标题文档
8 </title>
9 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
10
11 </script>
12 <script type="text/javascript">
13 var geocoder;
14 var map;
15 var query = "北京 东直门";
16
17 function initialize() {
18 geocoder = new google.maps.Geocoder();
19 var myOptions = {
20 zoom: 17,
21 mapTypeId: google.maps.MapTypeId.ROADMAP
22 }
23 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
24 codeAddress();
25 }
26
27 function codeAddress() {
28 var address = query;
29 geocoder.geocode({
30 'address': address
31 }, function(results, status) {
32 if (status == google.maps.GeocoderStatus.OK) {
33 map.setCenter(results[0].geometry.location);
34 var marker = new google.maps.Marker({
35 map: map,
36 position: results[0].geometry.location
37 });
38 var infowindow = new google.maps.InfoWindow({
39 content: "<b>地址：</b>" + address
40 });
41 infowindow.open(map, marker);
42 } else {
43 alert("未能解析该地址的原因: " + status);
44 }
45 });
46 }
47 function googleMapApi(){
48 query = document.getElementById("google").value;
49 initialize();
50 }
51 </script>
52 </head>
53
54 <body onload="initialize()">
55 <input type="text" id="google" /> <input type="button" id="button" value="click" onclick="googleMapApi()" />
56 <div id="map_canvas" style="width:400px; height:400px"></div>
57 </body>
