Hướng dẫn php google map get location - php google map lấy vị trí

Các hướng dẫn PHP này giúp hiểu về Google Map và API JavaScript của Google Map bằng PHP và JQuery. Chúng tôi sẽ tạo một bản đồ bằng cách sử dụng một địa chỉ không đổi và nhận tọa độ để hiển thị các điểm đánh dấu trên vị trí đó.

Bản đồ là một chức năng rất quan trọng để hiển thị hướng địa chỉ trên trang Liên hệ với chúng tôi, bạn cũng có thể thêm bản đồ vào wiki để cho biết hướng của địa điểm kinh doanh của bạn. Google cung cấp bản đồ Google để tạo bản đồ cho vị trí của bạn, Google cũng Cung cấp API MAP để truy cập vào các phương thức và tính năng chức năng của Google Maps.

Google cung cấp Google Map JS LIB để truy cập các phương thức MAP bằng API, chúng tôi sẽ sử dụng tên thành phố tĩnh và nhận được vĩ độ và kinh độ bằng API Google Map, sau đó chúng tôi sẽ gửi vĩ độ và kinh độ đến phiên bản MAP để hiển thị bản đồ. Bản đồ Google có mức thu phóng cho bản đồ, giá trị zoom thay đổi trong khoảng từ 1 đến 20, 20 là giá trị phóng to nhất và 1 là phóng to nhất.

Hãy bắt đầu thêm bản đồ Google bằng Php

Hướng dẫn PHP này giúp hiển thị bản đồ Google đơn giản với điểm đánh dấu trên trang web. Chúng tôi sẽ sử dụng một số mã HTML, CSS và JavaScript để hiển thị bản đồ. Để có hướng dẫn nâng cao để tạo bản đồ, hãy đọc hướng dẫn của nhà phát triển. Có các bước sau đây sẽ tuân theo hướng dẫn Google Map này,

Nhận khóa API Google Map.
Chúng tôi sẽ tạo một div sẽ hiển thị bản đồ.
Chúng tôi sẽ tạo trình bao bọc API trong PHP sẽ nhận được địa chỉ, vĩ độ và kinh độ được định dạng bằng cách sử dụng tên thành phố
Chúng tôi sẽ tạo một yêu cầu AJAX sẽ gọi API PHP trên và chuyển dữ liệu đến phiên bản Google Map.

Cấu trúc tệp là,

index.php: Tệp này sẽ có tất cả mã CSS, JavaScript và HTML.
map_api_wrapper.php: Tệp này sẽ sử dụng để tạo một phương pháp để có được vĩ độ và kinh độ.

Cách nhận khóa API Google

Truy cập bảng điều khiển API của Google
Tạo hoặc chọn một dự án.
Nhấp vào Tiếp tục để bật API và bất kỳ dịch vụ liên quan nào.
Bây giờ trang thông tin đăng nhập sẽ mở và nhận khóa.

Bước 1: Chúng tôi sẽ tạo tệp index.php được thêm vào bên dưới mã HTML vào tệp này. We will created index.php file added below HTML code into this file.

Simple Map
    
     	
	
    
    
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

Chúng tôi đã bao gồm Bootstrap và JQuery Libs vào phần đầu của tệp này, tạo ID container Div là ‘#Map, Div này sẽ chịu trách nhiệm hiển thị bản đồ, cũng đã thêm một số CSS cho container MAP Div.

Bước 2: Chúng tôi tạo tệp map_api_wrapper.php sẽ sử dụng API Google để có được vĩ độ và kinh độ bằng tên thành phố, được thêm mã bên dưới vào tệp này. We create map_api_wrapper.php file that will use google API to get latitude and longitude using City name, added below code into this file.

đã tạo phương thức get_geocode[] lấy địa chỉ làm tham số, tìm nạp dữ liệu từ Google API bằng địa chỉ. Chúng tôi đã gọi phương thức get_geocode [] ở cuối tệp có thông tin địa chỉ phản hồi dưới dạng dữ liệu JSON.

Bước 3: Chúng tôi sẽ tạo một cuộc gọi AJAX để tìm nạp dữ liệu từ tệp map_api_wrapper.php và gửi chức năng bản đồ để hiển thị bản đồ. Chúng tôi sẽ thêm mã dưới đây vào chân trang của tệp index.php. We will create an AJAX call to fetch data from map_api_wrapper.php file and send the map function to display map. We will add the below code into the footer of the index.php file.

  var map;
  function getData[] {
    $.ajax[{
    url: "map_api_wrapper.php",
    async: true,
    dataType: 'json',
    success: function [data] {
      console.log[data];
      //load map
      init_map[data];
    }
  }];  
  }
  
  function init_map[data] {
        var map_options = {
            zoom: 14,
            center: new google.maps.LatLng[data['latitude'], data['longitude']]
          }
        map = new google.maps.Map[document.getElementById["map"], map_options];
       marker = new google.maps.Marker[{
            map: map,
            position: new google.maps.LatLng[data['latitude'], data['longitude']]
        }];
        infowindow = new google.maps.InfoWindow[{
            content: data['formatted_address']
        }];
        google.maps.event.addListener[marker, "click", function [] {
            infowindow.open[map, marker];
        }];
        infowindow.open[map, marker];
    }

Đã tạo cuộc gọi AJAX để tìm nạp dữ liệu từ tệp map_api_wrapper.

Đã thêm API JavaScript của Google Map ở cuối tệp, tệp này sử dụng khóa API Google và khởi tạo phương thức MAP. Bạn cần thay thế khóa API bằng khóa API của bạn. Tham số gọi lại thực thi hàm get_geocode[] sau khi tải API JavaScript của Google Map. Thuộc tính ASYNC cho phép trình duyệt tiếp tục hiển thị phần còn lại của trang của bạn trong khi tải API.

Chúng tôi đang sử dụng chức năng JavaScript

1 để tìm bản đồ div trên trang web.

2 tạo ra một đối tượng Google Maps mới. Thuộc tính trung tâm cho API biết nơi tập trung bản đồ. Các tọa độ bản đồ được đặt theo thứ tự: vĩ độ và kinh độ. Bản đồ bao gồm trung tâm và mức thu phóng của vị trí.

Conclusion:

Chúng tôi đã tạo một bản đồ Google bằng API bản đồ Google JavaScript, chúng tôi cũng đã đặt các điểm đánh dấu vào bản đồ. Bạn cũng có thể đặt các thuộc tính khác của MAP, đây là hướng dẫn PHP cơ bản để giúp thêm bản đồ bằng điểm đánh dấu bằng API bản đồ Google JavaScript.

Bạn có thể tải xuống mã nguồn và xem demo liên kết dưới đây.

Hãy bắt đầu thêm bản đồ Google bằng Php

Cách nhận khóa API Google

Conclusion:

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề