基本

Created: November-22, 2018

CSS

以下是 Google 建议你使用的最低 CSS 规则，单独的 CSS 文件或 HTML 样式标记，例如 <style type="text/css">...</style>。

html, body {
    height: 100%; 
    margin: 0; 
    padding: 0;
}

#map {
    height: 400px;
}

HTML

Google 建议你在 Web 应用程序中声明真正的 DOCTYPE。

<!DOCTYPE html>

使用以下脚本标记在你的应用程序中加载 Google Maps JavaScript API。

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize">
</script>

创建一个 HTML 元素来保存地图。

<div id="map"></div>

JavaScript

这是一个显示地图和标记的非常简单的示例。

function initialize() {

    // Create a LatLng object
    // We use this LatLng object to center the map and position the marker
    var center = new google.maps.LatLng(50,0);

    // Declare your map options
    var mapOptions = {
        zoom: 4,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Create a map in the #map HTML element, using the declared options
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    // Create a marker and place it on the map
    var marker = new google.maps.Marker({
        position: center,
        map: map
    });
}

完整的例子

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #map {
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            function initialize() {

                // Create a LatLng object
                // We use this LatLng object to center the map and position the marker
                var center = new google.maps.LatLng(50, 0);

                // Declare your map options
                var mapOptions = {
                    zoom: 4,
                    center: center,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                // Create a map in the #map HTML element, using the declared options
                var map = new google.maps.Map(document.getElementById("map"), mapOptions);

                // Create a marker and place it on the map
                var marker = new google.maps.Marker({
                    position: center,
                    map: map
                });
            }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
    </body>

</html>

演示

JSFiddle demo

CSS

HTML

JavaScript

完整的例子

演示

更多信息