Cấu hình tài khoản google console

Trước hết tài khoản cần phải add billing , add thẻ cc mới có thể sử dụng được api map nhé.

Truy cập vào: https://console.cloud.google.com/apis/library  , active thư viện Map Javascript Api.

Vào Credentials , tạo API key. Phần restrictions chọn don't restrict key nếu ko muốn giới hạn key sử dụng cho thư viện nào.

Cấu hình code phần giao diện

Import link js lên đầu trang: https://maps.googleapis.com/maps/api/js?key=API_key&libraries=places

Thêm phần html:

Thêm phần css:

#map-canvas {
height: 250px;
width: 100%;
}
#map-canvas img {
max-width: none !important;
}
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 35% !important;
height: 30px;
text-overflow: ellipsis;
position: absolute;
z-index: 9999;
margin-left: 8%;
margin-top: 2%;
}
.pac-container {
z-index: 100000000 !important;
}

Thêm phần js:

var map;
var markers = [];
var lat, log;

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(initialize,showError);
} else {
lat = 21.0226967;
log = 105.8369637;
}
}

function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation.");

break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable.");
break;
case error.TIMEOUT:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
}

function initialize(position) {
geocoder = new google.maps.Geocoder();
lat = position.coords.latitude;
log = position.coords.longitude;
var haightAshbury = new google.maps.LatLng(lat, log);


$('#contact_maps').val(haightAshbury);
var mapOptions = {
center: haightAshbury,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
addMarker(haightAshbury);
google.maps.event.addListener(map, 'click', function (event) {
addMarker(event.latLng);

});
var input = (
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

var searchBox = new google.maps.places.SearchBox(
(input));

google.maps.event.addListener(searchBox, 'places_changed', function () {
var places = searchBox.getPlaces();

if (places.length == 0) {
return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}

markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
// Create a marker for each place.
addMarker(place.geometry.location);
bounds.extend(place.geometry.location);
}

map.fitBounds(bounds);
});
google.maps.event.addListener(map, 'bounds_changed', function () {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}

function addMarker(location) {
clearMarkers();
deleteMarkers();
$('#contact_maps').val(location);
var marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.BOUNCE
});
markers.push(marker);
}

function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}

function clearMarkers() {
setAllMap(null);
}

function showMarkers() {
setAllMap(map);
}

function deleteMarkers() {
clearMarkers();
markers = [];
}

google.maps.event.addDomListener(window, 'load', getLocation);

Nếu thành công , bên ngoài giao diện map sẽ hiển thị như sau:

Phần ô search box sau khi search và chọn địa điểm, phần marker trên bản đồ sẽ nhảy qua vị trí tương ứng nhé.