HTML Google マップ

HTML では、以前の記事で要素を含むいくつかのプロパティと属性について説明しました。 Web テクノロジーでオンライン ユーザーを引き付けるための多くの機能が備わっています。その Google マップは、Web サイト上の位置を表示するために HTML コード内で同じ Google マップを使用するという点で、Google 社の機能の 1 つです。これは主に企業の Web サイトが地域内のどこにあるのかを正確に識別するために使用されます。これは、JavaScript 言語を使用して HTML で呼び出され、企業の地理的位置の緯度と経度を検索および設定します。

構文:

HTML には、Web ページのコンテンツを開発するための各タグの一般的な構文があります。

<script src="google-api%20url">
function()
{
}
</script>

HTML Google マップの構文では、スクリプト タグに Google API を追加し、Web ページ コンテンツの地理的位置を設定します。いくつかの HTML 要素と属性を Web ページに配置して使用することで、ユーザーを引き付けることができ、それが企業やビジネスの成長につながります。ビジネスニーズに基づいて、使いやすい環境で Web ページをカスタマイズします。

HTML で Google マップを作成するには?

<script> を使用して、Web ページ上で Google マップ API を呼び出します。タグ。マーカーは主に HTML ページに Google マップを追加した後に設定できます。 3 つのステップが含まれています。 1. まず HTML ページを作成します。 2. 次に、マーカー付きの地図を追加します。 3. 最後に、場所を認証するための API キーを取得します。カスタマイズされた目論見書に基づいて事前定義されたタグを使用して HTML ページを作成し、必要に応じて <div> を使用してページ内のスタイル属性を調整します。要素;ウェブサイト内の個別のモジュールビューでコンテンツを分離します。</script>

マーカーを使用した地図の追加は、Web ページ上に Google マップを作成するための 2 番目のレベルです。このセクションでは、JavaScript API のマップを Web ページにロードする方法を説明し、API を使用して Web ページのマーカー付きマップを追加する JavaScript 関数も記述します。 API を script タグに追加すると、スクリプトがマップ API をロードした後、コールバック パラメーターによって initMap 関数などのいくつかの条件が実行されます。 Web ページのスクリプトで非同期属性を使用すると、ブラウザーは API が Web ページの残りのレンダリング ページ コンテンツを読み込むことを許可します。スクリプト タグの Google マップ API URL には、API キーを含むキー パラメータが表示されます。このセクションではキーを設定せず、API キーが自動的に生成され、パラメータ付きの initMap 関数を使用してコールバック パラメータが呼び出されます。

initMap 関数は初期化に使用され、JavaScript 関数と script タグ HTML タグを使用して Web ページをロードするたびにマップを追加します。 getElementById() は、

を分離することで Web ページ上のマップの位置を見つけるための JavaScript ライブラリ内の関数の 1 つであり、関数内でいくつかのデフォルト メソッドを呼び出します。 HTMLのタグ。スクリプト関数では、Java プログラミング言語と同じような new 演算子を使用してマップ インスタンスを作成します。new google.maps.Map() は、JavaScript 関数で Google マップ インスタンスを作成するための構文です。

など、HTML で定義済みのタグを使用します。これは、Web ページ内で地図を配置するためのサイド ナビゲーションです。地図は、最初の緯度と経度のような順序で HTML ページを調整します。最小サイズと最大サイズのズーム オプションと、Web ページの縦向きと横向きのナビゲーションを設定します。ズーム プロパティに 0 のような値が設定されている場合、ズーム断面図の最下部が表示され、マップ全体が 1 ページに表示されます。 Web ページ上の高解像度画像では、zoom プロパティでより高い値を設定できます。 Position プロパティを使用して、Web ページ上のマーカーの位置を設定します。

Web ページ上にマップを作成するときの 3 番目のステップで API キーを取得します。このキーは、カスタマイズされた API キーのマップおよび JavaScript 関数を認証するために使用されます。 API キーを作成するためのオプションを含む Google Cloud Platform コンソール ツールを使用します。

HTML Google マップの例

以下は HTML Google マップの例です:

例 #1

コード:

<div id="m" style="width:402px;height:433px;background:green"></div>
<script>
function sample() {
var m1 = {
center: new google.maps.LatLng(52.3, -0.14),
zoom: 13,
mapss: google.maps.MapTypeId.HYBRID
}
var m2 = new google.maps.Map(document.getElementById("m"), m1);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=sample"></script>

出力:

例 #2

コード:

<style>
#m {
height: 403px;
width: 102%;
}
</style>


<div id="m"></div>
<script>
function initMap() {
var loc = {lat: -26.334, lng: 132.034};
var m1 = new google.maps.Map(
document.getElementById('m'), {zoom: 3, center: loc});
var mar = new google.maps.Marker({position: loc, map: m1});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

出力:

例 #3

コード:

<div id="m1" style="width:402px;height:303px;"></div>
<br>
<div id="m2" style="width:402px;height:303px;"></div>
<br>
<div id="m3" style="width:402px;height:303px;"></div>
<br>
<div id="m4" style="width:402px;height:303px;"></div>
<script>
function sample() {
var choice1 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.ROADMAP
};
var choice2 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.SATELLITE
};
var choice3 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.HYBRID
};
var choice4 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.TERRAIN
};
var i = new google.maps.Map(document.getElementById("m1"),choice1);
var j = new google.maps.Map(document.getElementById("m2"),choice2);
var k = new google.maps.Map(document.getElementById("m3"),choice3);
var l = new google.maps.Map(document.getElementById("m4"),choice4);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=sample"></script>

出力:

上記の例では、事前定義された HTML 要素、属性、JavaScript 関数を備えた 3 つの異なるスタイルで Google マップを使用し、Web ページで地図 API を呼び出します。

Kesimpulan

Menggunakan API peta dokumen untuk mengenal pasti lokasi dalam fungsi javascript. Ia sepenuhnya berdasarkan penderia. Apabila kami menggunakan mudah alih dalam Peta Google, kami akan membolehkan lokasi untuk hanya mengambil data dari lokasi sumber ke arah destinasi. Kami juga menyemak sama ada aplikasi menerima penderia untuk mengesan lokasi pengguna dan menyemak isu keserasian penyemak imbas Parameter penderia tidak digunakan untuk tempoh yang lebih lama.

以上がHTML Google マップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。