代码如下:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=your-api-key&sensor=true"> </script> <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="100%; height:100%"> </div> </body> </html>
zoom设置得越小~则地图显示范围越大~
new google.maps.LatLng(X,Y)输入经纬度。
获取api-key:
https://developers.google.com/maps/documentation/javascript/tutorial?hl=zh-cn#api_key
https://code.google.com/apis/console/b/0/?noredirect#project:547251066599:access