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가 "location"인 요소에 지도 중심점의 주소가 표시됩니다.

6. 요약

PHP와 Google Maps API를 사용하여 지도에 마커를 동적으로 로드하고, 주소를 표시하고, API에서 제공하는 기타 기능을 활용할 수 있는 간단한 지도 애플리케이션을 만들었습니다. 실제 애플리케이션에서는 더욱 발전된 기술과 API를 사용하여 더욱 강력한 지도 애플리케이션을 만들 수 있습니다.

위 내용은 PHP와 Google Maps API를 사용하여 지도 애플리케이션 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!