Add Marker - Google Map (Simple) - Google Javascript API

[haiquang9994]

Vào trang Console Google API để tạo API Key. Tạo một project mới. Enable API cần dùng. Google Maps JavaScript API Trong tab Credentials tạo mới một API Key.

---

Thư viện Google Javascript API

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_KEY]&signed_in=true&callback=initMap" async defer></script>

---

Tạo mới map.

<div id="map_canvas"></div>

function initMap(){
           var map = new google.maps.Map(document.getElementById('map_canvas'), {
                center: {
                    lat: 10.825,
                    lng: 106.685
                },
                zoom: 15
            });
}

---

Hàm xử lý.

        function geocoderAddress(geocoder, resultsMap, address) {
            geocoder.geocode({
                address: address
            }, function (results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                    resultsMap.setCenter(results[0].geometry.location);
                    if (marker) {
                        marker.setMap(null);
                    }
                    marker = addMarker(resultsMap, results[0].geometry.location);
                }
            });
        }

        function addMarker(map, position) {
            var mk = new google.maps.Marker({
                map: map,
                position: position
            });
            return mk;
        }

---

Tạo Marker.

var geocoder = new google.maps.Geocoder();
var address = "07 Nam Quoc Cang, Phuong Pham Ngu Lao, Quan 1, TP Ho Chi Minh";
geocoderAddress(geocoder, map, address);

[khanhicetea]

Good job !!!