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

Trước hết để sử dụng được các bạn cần phải add billing vào tài khoản , cần phải có thẻ thanh toán quốc tế. Nếu không add sẽ không sử dụng được nhé.

Truy cập vào https://console.cloud.google.com/ để tạo 1 project mới.

Kích hoạt thư viện maps javascript api

Tạo API Key

Phần API restriction nếu chọn don't restrict key thì key đó sẽ sử dụng được ở mọi nơi , ngược lại key sẽ chỉ sử dụng được trên những domain cho phép

Ứng dụng google map vào giao diện

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

Phần html thêm như dưới đây:

Thêm chút 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;
}

Phần js thêm như dưới đây
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);
codeLatLng(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);
infowindow.close();
});
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);

Sau khi thêm , phần map bạn sẽ có giao diện như sau

Nếu thấy hữu ích , ngại gì mà không share bài viết này

Chia sẻ

Bình luận