Thêm Google map vào website nhanh nhất

2020-11-12 1985 lượt xem

Mục lục [ hide ]

Google MapsAPI thay đổi cách tính phí
- Kích hoạt tính năng thanh toán
Bắt đầu tích hợp google map vào website.

Google MapsAPI thay đổi cách tính phí

Hiện tại, Google đã thay đổi cách tính phí cho cho các dịch vụ Map API, khi tạo Account mới, người dùng sẽ được sử dụng free dịch vụ API từ Google với hạn mức là 200$/ 1 tháng, bao gồm tất cả dịch vụ mà Google Map API cung cấp.

Kích hoạt tính năng thanh toán

Sau khi vượt quá giới hạn miễn phí của Google Maps API Javascript, bạn có thể tiếp tục sử dụng bằng cách bật chế độ thanh toán. Lúc này, cứ mỗi 1000 map loads mới bạn phải trả thêm 0,5$, nhưng tối đa chỉ được 100.000 lượt/ngày.

Bắt đầu tích hợp google map vào website.

Mình xin bắt đầu với một ví dụ đơn giản nhất khi tích hợp Google map vào web.

0. kích hoạt tất cả những thứ này trong google console

Geocoding API
Maps Embed API
Maps JavaScript API
Maps SDK for Android
Maps SDK for iOS
Maps Static API
Places API 168
Street View Static API

1. Đầu tiên thêmscript load

<!-- Replace YOUR_API_KEY here by your key above --> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

2. Thêm vào html 1 div có id là map.

khi bạn thêm div thì mới có thể dùng javascript để vẽ google map vào bên trong

<div id="map" style="width: 500px; height: 400px;"></div>

3. Khởi tạo 1 map với javascript như sau:


var map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 21.0168864, lng: 105.7855574 },
        zoom: 15
    });

tất cả file:


<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Trương Thanh Hùng demo</title> 
  <script src="https://maps.google.com/maps/api/js?key="></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 21.0168864, lng: 105.7855574 },
        zoom: 15
    });
  </script>
</body>
</html>

kết quả như sau:

4. Thêm vị trí của bạn trên google map.

khởi tạo 1 Marker. Marker dùng để xác định, đánh dấu một vị trí trên bản đồ, bạn có thể đánh dấu một hoặc nhiều điểm. Sau khi khởi tạo một map, ở đây chúng ta sẽ khởi tạo một marker mới bằng google.maps.Marker


var marker = new google.maps.Marker({
        position: new google.maps.LatLng(35.707616, 139.669912),
        map: map
    });

tất cả file như sau:


<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Trương Thanh Hùng demo</title> 
  <script src="https://maps.google.com/maps/api/js?key="></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(35.707616, 139.669912),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(35.707616, 139.669912),
        map: map
    });
  </script>
</body>
</html>

kết quả đạt được là:

Nếu cần đánh dấu nhiều điểm trên bản đồ thì bạn chỉ việc khởi tạo nhiều google.maps.Marker tương tự. Mặc định sẽ dùng icon như hình để đánh dấu nhưng chúng ta có thể thay đổi bằng thuộc tính icon khi khởi tạo marker.

code tham khảo như sau:


<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Trương Thanh Hùng demo</title> 
  <script src="https://maps.google.com/maps/api/js?key="></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
  /// chú ý trong option này có center nghĩa là tọa độ trung tâm của map
    /// zoom: độ phóng to nhỏ của map
    /// ... 
    var mapOptions = {
        zoom: 15,
        // scrollwheel: false,
        center: new google.maps.LatLng(10.653092, 107.270808),
        // mapTypeControlOptions: {
        //     mapTypeIds: [google.maps.MapTypeId.ROADMAP, "map_style"],
        // },
    };

    var map = new google.maps.Map(
        document.getElementById("map"),
        mapOptions
    );
    
    //// khỏi tạo maker ban đầu
    var marker;
    /// giả sử ta load trong db ra 1 nùi location như sau: 
    var locations = [
        {
            title: "nhà tui",
            description: "nhà tui có dê có heo",
            lat: 10.653704, 
            long: 107.268995
        },
        {
            title: "nhà hàng xóm đó",
            description: "nhà tui có hàng xóm",
            lat: 10.653092,
            long: 107.270808
        },
        {
            title: "nhà thờ đó bạn eey",
            description: "nhà thờ không phải giáo xứ tui đâu",
            lat: 10.646080,
            long: 107.283186
        }
    ]
    /// thêm các vị trí khác 
    for(var i = 0; i < locations.length; i ++ ){

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i].lat, locations[i].long),
            map: map,
            icon: 'https://ebudezain.com/images/map-icon.png' /// cái này là icon của vị trí bạn muốn hình gì
        });

    }
    /// kết thúc thêm vị trí

    
  </script>
</body>
</html>

5. Thêm ghi chú cho vị trí google map.

trong 1 location thông thường họ luôn muốn có những ghi chú nhất định. đây là bản đồ web bất động sản. khi click vào 1 vị trí thì sẽ hiện thị phần mô tả về vịt rí đó.

Để làm được điều này chúng ta hoàn toàn có thể thêm vào bằng thuộc tính infowindow

cụ thể full code demo như sau:


<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Trương Thanh Hùng demo</title> 
  <script src="https://maps.google.com/maps/api/js?key="></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
  /// chú ý trong option này có center nghĩa là tọa độ trung tâm của map
    /// zoom: độ phóng to nhỏ của map
    /// ... 
    var mapOptions = {
        zoom: 15,
        // scrollwheel: false,
        center: new google.maps.LatLng(10.648988, 107.275978),
        // mapTypeControlOptions: {
        //     mapTypeIds: [google.maps.MapTypeId.ROADMAP, "map_style"],
        // },
    };

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

    //// khỏi tạo maker ban đầu
    var marker;
    /// khởi tạo ban đầu infowindow 
    var infowindow = new google.maps.InfoWindow()
    /// giả sử ta load trong db ra 1 nùi location như sau: 
    var locations = [
        {
            title: "nhà tui",
            description: "nhà tui có dê có heo",
            lat: 10.653704, 
            long: 107.268995
        },
        {
            title: "nhà hàng xóm đó",
            description: "nhà tui có hàng xóm",
            lat: 10.653092,
            long: 107.270808
        },
        {
            title: "nhà hàng dê xồm nè mọi ng ơi",
            description: "nhà tui có hàng xóm bán lẩu dê",
            lat: 10.648988,
            long: 107.275978
        },
        {
            title: "nhà thờ đó bạn eey",
            description: "nhà thờ không phải giáo xứ tui đâu",
            lat: 10.646080,
            long: 107.283186
        }
    ]
    
    /// thêm các vị trí khác 
    for(var i = 0; i < locations.length; i ++ ){

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i].lat, locations[i].long),
            map: map,
            icon: 'https://ebudezain.com/images/map-icon.png' /// cái này là icon của vị trí bạn muốn hình gì
        });
        /// muốn khi click vào icon map thì mới hiện ra cái ghi chú thì thêm khúc sự kiện này
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                /// thêm note vào chỗ này đồng thời có thêm class để css: address_detail_map, main_color
                var address_detail =
                '<div class="address_detail_map">' +
                '<h4 class="main_color">' +
                locations[i].title +
                '</h4>' +
                locations[i].description +
                "</div>";
                address_detail = address_detail.split("\n").join("<br />");
                
                /// sau khi tạo ghi chú ra html thì cần add html vào marker
                infowindow.setContent(address_detail);
                //   infowindow.setContent(address_detail);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
    /// kết thúc thêm vị trí

    
  </script>
</body>
</html>

kết quả khi click vào icon:

đôi khi bạn cũng muốn thêm ghi chú ban đầu( mới load map lên đã có 1 cái ghi chú hiện sẵn, còn lại không hiện) thì xem đoạn code sau:


<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Trương Thanh Hùng demo</title> 
  <script src="https://maps.google.com/maps/api/js?key="></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
  /// chú ý trong option này có center nghĩa là tọa độ trung tâm của map
    /// zoom: độ phóng to nhỏ của map
    /// ... 
    var mapOptions = {
        zoom: 15,
        // scrollwheel: false,
        center: new google.maps.LatLng(10.648988, 107.275978),
        // mapTypeControlOptions: {
        //     mapTypeIds: [google.maps.MapTypeId.ROADMAP, "map_style"],
        // },
    };

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

    //// khỏi tạo maker ban đầu
    var marker;
    /// khởi tạo ban đầu infowindow 
    var infowindow = new google.maps.InfoWindow()
    /// giả sử ta load trong db ra 1 nùi location như sau: 
    var locations = [
        {
            title: "nhà tui",
            description: "nhà tui có dê có heo",
            lat: 10.653704, 
            long: 107.268995
        },
        {
            title: "nhà hàng xóm đó",
            description: "nhà tui có hàng xóm",
            lat: 10.653092,
            long: 107.270808
        },
        {
            title: "nhà hàng dê xồm nè mọi ng ơi",
            description: "nhà tui có hàng xóm bán lẩu dê",
            lat: 10.648988,
            long: 107.275978
        },
        {
            title: "nhà thờ đó bạn eey",
            description: "nhà thờ không phải giáo xứ tui đâu",
            lat: 10.646080,
            long: 107.283186
        }
    ]
    
    /// thêm các vị trí khác 
    for(var i = 0; i < locations.length; i ++ ){

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i].lat, locations[i].long),
            map: map,
            icon: 'https://ebudezain.com/images/map-icon.png' /// cái này là icon của vị trí bạn muốn hình gì
        });
        /// muốn khi click vào icon map thì mới hiện ra cái ghi chú thì thêm khúc sự kiện này
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                /// thêm note vào chỗ này đồng thời có thêm class để css: address_detail_map, main_color
                var address_detail =
                '<div class="address_detail_map">' +
                '<h4 class="main_color">' +
                locations[i].title +
                '</h4>' +
                locations[i].description +
                "</div>";
                address_detail = address_detail.split("\n").join("<br />");
                
                /// sau khi tạo ghi chú ra html thì cần add html vào marker
                infowindow.setContent(address_detail);
                //   infowindow.setContent(address_detail);
                infowindow.open(map, marker);
            }
        })(marker, i));
        if( i == 2 ){
            var addressil =
            '<div class="address_detail_map">' +
            '<h4 class="main_color">' +
            locations[i].title +
            '</h4>' +
            locations[i].description +
            "</div>";
            addressil = addressil.split("\n").join("<br />");
            
            /// sau khi tạo ghi chú ra html thì cần add html vào marker
            infowindow.setContent(addressil);
            //   infowindow.setContent(address_detail);
            infowindow.open(map, marker);
        }
    }
    
    
  </script>
</body>
</html>

kết quả nè

sdfsf

6.Geolocation (geographic locaion)

đôi khi bạn cần làm google map cho mọi ng search vị trí thì phải sử dụng vị trí. bạn xem demo ở đây. demo Geolocation google api. chú ý thêm Geocoding API vào trong google console.

code như

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Trương Thanh Hùng demo</title> 
  <script type="text/javascript" src="https://ebudezain.com/js/library/jquery.min.js?v=1.0.0"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=&libraries=places"></script>
</head> 
<body>
  <div class="form-group">
        <label for="address_address">Address</label>
        <input type="text" id="address-input" name="address_address" class="form-control map-input">
        <input type="hidden" name="address_latitude" id="address-latitude" value="0" />
        <input type="hidden" name="address_longitude" id="address-longitude" value="0" />
    </div>
    <div id="address-map-container" style="width:100%;height:400px; ">
        <div style="width: 100%; height: 100%" id="address-map"></div>
    </div>

  <script type="text/javascript">
  function initialize() {

    $('form').on('keyup keypress', function(e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode === 13) {
            e.preventDefault();
            return false;
        }
    });
    const locationInputs = document.getElementsByClassName("map-input");

    const autocompletes = [];
    const geocoder = new google.maps.Geocoder;
    for (let i = 0; i < locationInputs.length; i++) {

        const input = locationInputs[i];
        const fieldKey = input.id.replace("-input", "");
        const isEdit = document.getElementById(fieldKey + "-latitude").value != '' && document.getElementById(fieldKey + "-longitude").value != '';

        const latitude = parseFloat(document.getElementById(fieldKey + "-latitude").value) || -33.8688;
        const longitude = parseFloat(document.getElementById(fieldKey + "-longitude").value) || 151.2195;

        const map = new google.maps.Map(document.getElementById(fieldKey + '-map'), {
            center: {lat: latitude, lng: longitude},
            zoom: 13
        });
        const marker = new google.maps.Marker({
            map: map,
            position: {lat: latitude, lng: longitude},
        });

        marker.setVisible(isEdit);

        const autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.key = fieldKey;
        autocompletes.push({input: input, map: map, marker: marker, autocomplete: autocomplete});
    }

    for (let i = 0; i < autocompletes.length; i++) {
        const input = autocompletes[i].input;
        const autocomplete = autocompletes[i].autocomplete;
        const map = autocompletes[i].map;
        const marker = autocompletes[i].marker;

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            marker.setVisible(false);
            const place = autocomplete.getPlace();

            geocoder.geocode({'placeId': place.place_id}, function (results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                    const lat = results[0].geometry.location.lat();
                    const lng = results[0].geometry.location.lng();
                    setLocationCoordinates(autocomplete.key, lat, lng);
                }
            });

            if (!place.geometry) {
                window.alert("No details available for input: '" + place.name + "'");
                input.value = "";
                return;
            }

            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);
            }
            marker.setPosition(place.geometry.location);
            marker.setVisible(true);

        });
    }
}

function setLocationCoordinates(key, lat, lng) {
    const latitudeField = document.getElementById(key + "-" + "latitude");
    const longitudeField = document.getElementById(key + "-" + "longitude");
    latitudeField.value = lat;
    longitudeField.value = lng;
}


initialize();
    
  </script>
</body>
</html>

kết quả

giải thích code

Đoạn này xử lý việc tự động hoàn thành địa chỉ.


const autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.key = fieldKey;
autocompletes.push({input: input, map: map, marker: marker, autocomplete: autocomplete});

Cuối cùng truy vấn cho vĩ độ và kinh độ:


geocoder.geocode({'placeId': place.place_id}, function (results, status) {
    if (status === google.maps.GeocoderStatus.OK) {

        const lat = results[0].geometry.location.lat();
        const lng = results[0].geometry.location.lng();

        setLocationCoordinates(autocomplete.key, lat, lng);
    }
});

chủ đề