Googleは基本をマッピングします
簡単なGoogleマップを作成します
それでは、簡単なGoogleマップを作成しましょう。
これが英国のロンドンを示すGoogleマップです：
例
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym＆sensor = false"> </script = <var mapprop = <bar mapprop = </script> </script Google.maps.latlng（51.508742、-0.120850）、Zoom：5、maptypeid：google.maptypeid.roadmap}; var map = new google.maps.map（document.getelementbyid（ "googlemap"）、mapprop）; initialize）; </script> </head> <body> <div id = "googlemap"> </div> </body> </html>
レンダリングの例（コピーして直接実行できます。もちろん、Googleにアクセスできる必要があります）
例分析
上記の例を使用して、Googleマップの作成プロセスを分析します。
アプリケーションがHTML5を宣言するのはなぜですか？
<！doctype html>
ほとんどのブラウザは「標準モード」HTML5ドキュメントレンダリングページを使用します。つまり、アプリケーションは主要なブラウザと互換性があります。
さらに、Doctypeタグがない場合、ブラウザはQuirksモードを使用してページコンテンツをレンダリングします。
ヒント：標準モードでは、「無差別モード」CSSを使用できないことに注意してください。特定のアプリケーションでは、すべてのパーセンテージベースのサイズを親ブロック要素から継承する必要があります。親モジュールでサイズが指定されていない場合、デフォルト値は0 x 0ピクセルです。パーセンテージを使用する場合は、次のように<style>タグでそれらを宣言できます。
<style type = "text/css"> html {height：100％} body {height：100％; margin：0; padding：0} #googlemap {height：100％} </style>このスタイルステートメントは、MAPモジュール（GoogleMap）のHTML高さが100％である必要があることを示しています。
GoogleマップAPIキーを追加します
GoogleマップAPIは、次の例の最初の<script>タグに含める必要があります。
<Script src = "http://maps.googleapis.com/maps/api/js?key=your_api_key&sensor=true_or_false"> </script>
Googleが生成したAPIキーをキーパラメーター（key = your_api_key）に配置します。
センサーパラメーターが必要です。これには、アプリケーションがセンサー（GPSナビゲーションと同様）を使用してユーザーの場所を見つけるかどうかを示します。パラメーター値は、trueまたはfalseに設定できます。
https
アプリケーションがSecure HTTP（HTTPS：HTTP Secure）アプリケーションである場合、HTTPを使用してGoogle Maps APIをロードできます。
<script src = "https://maps.googleapis.com/maps/api/js?key=your_api_key＆sensor=true_or_false"> </script>
非同期負荷
同様に、ページが完全にロードされた後、GoogleマップAPIをロードできます。
次の例では、window.onloadを使用して、Googleマップの全負荷を実現します。 loadscript（）関数は、Googleマップapi <script>タグの読み込みを作成します。さらに、タグの最後にコールバック=初期化パラメーターが追加されます。 APIが完全にロードされた後、Callback関数が実行されるinitialize（）は次のとおりです。
例
<！doctype html> <html> <head> <script> function initialize（）{bar mapprop = {center：new google.maps.latlng（51.508742、-0.120850）、Zoom：7、MapTypeid：Google.maps.maptyid.roadmap}; var map = new Google.maps.map（document.getElementById（ "googlemap"）、mapprop）;} function loadscript（）{var script = document.createelement（ "script"）; script.type = "text/javascript"; script.src = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor = false&callback=initialize"; document.body.appendChild（script）;} window.onload = loadscript; </script> </head> <body> <div id = "googlemap"> </div> </body> </html>マッププロパティを定義します
マップを初期化する前に、マッププロパティを定義するためにマッププロパティオブジェクトを作成する必要があります。
var mapprop = {center：new Google.maps.latlng（51.508742、-0.120850）、Zoom：7、MapTypeid：Google.maps.maptypeid.roadmap};センター（センターポイント）
センタープロパティは、地図の中心を指定します。これにより、座標（緯度、経度）を介してマップ上に中心点が作成されます。
ズーム（ズームシリーズ）
ズームプロパティは、マップのズーム範囲を指定します。ズーム：0は、アースマップ全体の完全なズームを示しています。
maptypeid（マップの初期タイプ）
MapTypeIDプロパティは、マップの初期タイプを指定します。
maptypeidには、次の4つのタイプが含まれています。
google.maps.maptypeid.hybrid：衛星画像を表示するメインストリートの透明レイヤー
google.maps.maptypeid.roadmap：通常のストリートマップを表示します
google.maps.maptypeid.satellite：衛星画像を表示します
google.maps.maptypeid.terrain：地形や植生などの自然な特徴を備えた地図を表示する
Googleマップを表示する場所
通常、Googleマップは<div>要素で使用されます：
<div id = "googlemap"> </div>
注：マップには、DIVにサイズが設定されたマップのサイズが表示されるため、マップのサイズを<div>要素に設定できます。
マップオブジェクトを作成します
var map = new google.maps.map（document.getElementById（ "googlemap"）、mapprop）;
上記のコードは、パラメーター（Mapprop）を使用して、<div>要素（IDはGoogleMap）に新しいマップを作成します。
ヒント：ページに複数のマップを作成する場合は、新しいマップオブジェクトを追加するだけです。
次の例では、4つのマップインスタンスを定義しています（4つのマップは異なるマップタイプを使用しています）。
例
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym＆sensor = false"> </script = <var mapprop = <bar mapprop = </script> </script Google.maps.latlng（51.508742、-0.120850）、Zoom：9、MapTypeid：Google.maptypeid.RoadMap}; var mapprop2 = {center：new Google.maps.latlng（51.508742、-0.120850）、Zoom：9、MapTypeid：Google.maps.maptypeid.satellite}; var mapprop3 = {center：new Google.maps.latlng（51.508742、-0.120850）、Zoom：9、MapTypeid：Google.maps.maptypeid.hybrid}; var mapprop4 = {center：new Google.maps.latlng（51.508742、-0.120850）、Zoom：9、MapTypeid：Google.maps.maptypeid.terrain}; var map = new google.maps.map（document.getElementById（ "googlemap"）、mapprop）; var map2 = new google.maps.map（document.getelementbyid（ "googlemap2"）、mapprop2）; var map3 = new google.maps.map（document.getElementbyId（ "googlemap3"）、mapprop3）; var map4 = new google.maps.map（document.getelementbyid（ "googlemap4"）、mapprop4）;} google.maps.adddomilistener（window、 'load'、initialize）; </scrip> </head> <body> <div id = "googlemap"> </div id = "googlemap3"> </div> <br> <div id = "googlemap4"> </div> </body> </html>マップの読み込み
ウィンドウが読み込まれた後、MAPオブジェクトは初期化（）関数を実行することにより初期化されます。これにより、ページが完全にロードされた後にGoogleマップがロードされるようになります。
google.maps.event.adddomlistener（window、 'load'、initialize）;
上記は、Googleマップの基本情報の編集です。後で追加し続けます。このサイトへのご支援ありがとうございます！