PHP と Google Maps API を使用して地図アプリケーションを作成する

この記事では、PHP と Google Maps API を使用して簡単な地図アプリケーションを作成する方法を紹介します。このアプリケーションは、Google Maps API を使用して地図を表示し、PHP を使用して地図上にマーカーを動的に読み込みます。

開始する前に、Google アカウントを取得し、API キーを作成する必要があります。 Google Cloud コンソールで、Maps JavaScript API と Geocoding API を有効にします。

1. Google Maps API の構成

Google Cloud コンソールから API キーを取得した後、それを HTML ファイルに埋め込みます:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

2. 地図の作成

アプリケーションで地図を使用するには、HTML 要素を作成し、それを Google Maps API に渡す必要があります。たとえば、ID が「map」の要素にマップを作成するには:

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

次に、JavaScript コードを使用してマップを初期化します:

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.7749, lng: -122.4194 },
    zoom: 12
  });
}

これにより、高さのマップが作成されます。 0、まだマップ マーカーを追加していないためです。

3. 地図マーカーの追加

地図にマーカーを追加するには、各マーカーの経度と緯度を指定し、Google Maps API に渡す必要があります。例:

// 经度、纬度
const locations = [
  { lat: 37.7749, lng: -122.4194 },
  { lat: 37.7749, lng: -122.4294 },
  { lat: 37.7849, lng: -122.4194 },
  { lat: 37.7849, lng: -122.4294 }
];

// 创建标记并添加到地图上
locations.forEach(location => {
  new google.maps.Marker({
    position: location,
    map: map
  });
});

これにより、マップに 4 つのマーカーが追加されます。

4. タグの動的読み込み

特定の条件に基づいてデータベースまたは API からタグを動的に読み込みたい場合は、PHP を使用できます。まず、データをクエリし、各マーカーの経度と緯度を含む JSON 配列を返す PHP スクリプトを作成します。

<?php
// 连接到数据库或API
$data = [
  ['lat' => 37.7749, 'lng' => -122.4194],
  ['lat' => 37.7749, 'lng' => -122.4294],
  ['lat' => 37.7849, 'lng' => -122.4194],
  ['lat' => 37.7849, 'lng' => -122.4294]
];

header('Content-Type: application/json');
echo json_encode($data);
?>

次に、JavaScript で jQuery を使用してこのスクリプトを取得し、そのデータを Google Maps API に渡します。

// 获取地图数据
$.get("get_map_data.php", function(data) {
  // 创建标记并添加到地图上
  data.forEach(location => {
    new google.maps.Marker({
      position: location,
      map: map
    });
  });
});

マーカーは、ページが読み込まれるたびに動的に読み込まれるようになります。

5. 住所の位置決めと逆ジオコーディング

マーカーの追加に加えて、Google Maps API は他の多くの機能を提供します。住所ターゲティングとリバース ジオコーディングを使用すると、地図上に特定の場所の位置を表示したり、経度と緯度に基づいて特定の場所の名前を返したりすることができます。

たとえば、逆ジオコーディングを使用して、地図の上に地図の中心点の住所を表示します。

let map;
let geocoder;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.7749, lng: -122.4194 },
    zoom: 12
  });

  geocoder = new google.maps.Geocoder();

  // 将地图中心点的地址显示在地图上方
  geocoder.geocode({ location: map.getCenter() }, function(results, status) {
    if (status === "OK") {
      if (results[0]) {
        $("#location").text(results[0].formatted_address);
      } else {
        $("#location").text("No address found");
      }
    } else {
      $("#location").text("Geocoder failed due to: " + status);
    }
  });
}

これにより、地図の中心点の住所が要素に表示されます。 ID「場所」。

6. 概要

PHP と Google Maps API を使用して、地図上にマーカーを動的に読み込み、住所を表示し、その他の機能を利用できるシンプルな地図アプリケーションを作成しました。 API によって提供されます。実際のアプリケーションでは、より高度なテクノロジーと API を使用して、より強力な地図アプリケーションを作成できます。

以上がPHP と Google Maps API を使用して地図アプリケーションを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。