GoogleMapsAPIの基本。地図描写と指定場所にマーカーを表示するまで。生活の記事GoogleMapsAPIの基本。地図描写と指定場所にマーカーを表示するまで。2016.3.18WEB制作GoogleMapsAPIの読み込みを非同期にするとスピードアップするらしい。非同期で読み込むと、パフォーマンスが向上します。サンプルをすべてアップデートしました。みなさんのサイトも同じように変更できます。ページの読み込み時間をスピードアップHTML+JSの記述方法が変わっているので、復習を兼ねて確認してみます。スポンサーリンクGoogleMapsAPIのjsを読み込むGoogleMapsAPIを使うためのjsを読み込みます。非同期で読み込むため、<body>セクションの末尾に配置できるので、これまでの<head>セクションで読み込む方法よりもページ描写がスムーズになります。API_KEYは必要とされていますが、現時点では無くても動作します。API_KEYがある場合はURLの?以降のクエリー部にkey=XXXXXXXXXの形式で記述します。defer></script></body>[/html]asyncとdeferが気になるけど、ここでは省略。GoogleMapを表示するGoogleMapsAPIを読み込んだら、そのAPIを使ってGoogleMapを表示します。この記述もページ描写を妨げないように<body>セクションの下の方に記述します。14});}</script>[/html]centerで地図の中心を指定しています。latは緯度、lngは経度です。zoomは地図のズームですね。値が大きいほど、地図に近づきます。実際に表示をする場所を指定します。指定した場所にGoogleMapが表示されます。style="height:500px;"></div>[/html]忘れがちなのがcssでの高さ指定。cssはインラインで記述しても外部ファイルで記述してもいいですが、高さ指定を忘れずに。高さを指定しないと、何も表示されません。指定し忘れて「あれ?」ってなる時があります。実際の表示を見る指定場所にマーカーを表示する場所を指定する時に使用するマーカーをGoogleMapに表示します。地図描写する時のinitMap()の中にマーカーを作成するコードを記述します。map});}[/html]positionはcenterと同様に緯度と経度を記述すると、その場所にマーカーが生成されます。mapはマーカーを生成する地図を指定します。ここでは、上のソースの2行目のmapを指定します。これで最低限のGoogleMapが表示できるようになりました。ソースコードをまとめると次のようになります。defer></script></body>[/html]実際の表示を見るスポンサーリンクタグGoogleMapsAPI関連記事Mac上でIEの確認環境を無料で作る。list-style-typeのdecimalで採番される数字の最大はいくつ?WordPressに賢威を使ったら画面が真っ白。原因はPHPのバージョン。必須サイトコメント人気記事エネループの緑ランプが点滅して充電できないので原因を突き止めてみたdocomoで番号非通知設定を着信拒否するのは簡単にできたフリーランスがコストコの法人会員になってみたMac上でIEの確認環境を無料で作る。100均より安い?モルデックスの耳栓を使ってみたら驚くほど静かになった最新記事100均より安い?モルデックスの耳栓を使ってみたら驚くほど静かになったフリーランスがコストコの法人会員になってみたiMacを金利ゼロのAppleローンで購入してみたMac上でIEの確認環境を無料で作る。TOP仕事WEB制作GoogleMapsAPIの基本。地図描写と指定場所にマーカーを表示するまで。WEB系フリーランスの仕事と生活の。