Google Maps API

Google Maps API là một tập các phương thức và công cụ cho phép chúng ta hiển thị các bản đồ trên web.

Các bước cơ bản tạo một Google Map cơ bản

  • Tạo một khung chứa (container) Google Map, ví dụ đoạn mã sau:

<div id="googleMap" style="width:100%;height:400px"></div>
  • Tạo một hàm (JavaScript) để khởi tạo các thuộc tính của Google Map, ví dụ đoạn mã sau:

function myMap() {

var mapProp= {

center:new google.maps.LatLng(51.508742,-0.120850),

zoom:5,

};

// tạo ra một Google map mới trong <div> có id="googleMap" và tham số //là thuộc tính mapProp

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

}

Biến mapProp định nghĩa các thuộc tính cho Google Map; thuộc tính center xác định vị trí trung tâm cho Google Map (dùng toạ độ kinh độ và vĩ độ); zoom xác định mức zoom;

  • Chúng ta có thể nhúng nhiều bản đồ với các kiểu khác nhau như đoạn mã minh hoạ sau:

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);

var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);

var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);

var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);
  • Gọi Google API với API key miễn phí như đoạn mã sau:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

YOUR_KEY là khoá API có thể được lấy về theo các bước sau:

  • Chọn một dự án sẵn có từ mục Select a project hay tạo một dự án mới từ Create Project:

  • Tạo một dự án mới thì giao diện trông như sau:

Nhấn Create.

  • Chọn Credentials từ khung API Manager sẽ xuất hiện hộp thoại yêu cầu chọn dự án vừa tạo và tạo một Credentials như sau:

  • Nhấn Create credentials và chọn API Key:

  • Copy API key:

Đoạn mã gọi Google API bây giờ trông như sau:


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBYYBXoZgmcEDTDpDdGuABDKEKFfwEQCcs&callback=myMap"></script>

Xem thêm các hướng dẫn từ Google tại https://support.google.com/googleapi/answer/7037264?hl=en&ref_topic=7013279

Đoạn mã hoàn chỉnh:


<!DOCTYPE html>

<html>

<body>

<h1>My First Google Map</h1>

<div id="googleMap" style="width:100%;height:400px;"></div>

<script>

function myMap() {

var mapProp= {

center:new google.maps.LatLng(51.508742,-0.120850),

zoom:5,

};

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

}

</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBYYBXoZgmcEDTDpDdGuABDKEKFfwEQCcs&callback=myMap"></script>

</body>

</html>

Học thêm các tiện ích khác từ Google Map tại https://www.w3schools.com/graphics/google_maps_intro.asp

Học HTML & CSS >