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 파일에 삽입하세요.

2. 지도 만들기

애플리케이션에서 지도를 사용하려면 HTML 요소가 필요합니다. 생성된 다음 Google Maps API에 전달됩니다. 예를 들어, ID가 "map"인 요소에 지도를 생성하려면:

그런 다음 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 스크립트를 작성하세요.

 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!