Mình chia sẻ với các bạn demo 8 Script Google Map (GMAP) hữu ích trong thiết kế website. Tất cả điều viết bằng JavaScript và HTML.
Thư viện cần có: https://maps.googleapis.com/maps/api/js
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[YOUR_KEY]&sensor=false"></script>
[YOUR_KEY]: Key Google Map API của bạn
Nếu không hiển thị được bản đồ, hãy nhấn Ctrl-F5 để Refresh lại trình duyệt nhé 😉
1. Address Bar
JS:
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function InitializeMap() {
directionsDisplay = new google.maps.DirectionsRenderer();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions =
{
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directionpanel'));
var control = document.getElementById('control');
control.style.display = 'block';
}
function calcRoute() {
var start = document.getElementById('startvalue').value;
var end = document.getElementById('endvalue').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function Button1_onclick() {
calcRoute();
}
window.onload = InitializeMap;
HTML:
<table id ="control"> <tr> <td> <table> <tr> <td>From:</td> <td><input id="startvalue" type="text" style="width: 305px" /></td> </tr> <tr> <td>To:</td> <td><input id="endvalue" type="text" style="width: 301px" /></td> </tr> <tr> <td align ="right"><input id="Button1" type="button" value="GetDirections" onclick="return Button1_onclick()" /></td> </tr> </table> </td> </tr> <tr> <td valign ="top"> <div id ="directionpanel" style="height: 390px;overflow: auto"></div> </td> <td valign ="top"> <div id ="map" style="height: 390px; width: 489px"></div> </td> </tr> </table>
2. Geo Coding
JS:
var map;
var geocoder;
function InitializeMap() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions =
{
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function FindLocaiton() {
geocoder = new google.maps.Geocoder();
InitializeMap();
var address = document.getElementById("addressinput").value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function Button1_onclick() {
FindLocaiton();
}
window.onload = InitializeMap;
HTML:
<table> <tr> <td> <input id="addressinput" type="text" style="width: 447px" /> </td> <td> <input id="Button1" type="button" value="Find" onclick="return Button1_onclick()" /></td> </tr> <tr> <td colspan ="2"> <div id ="map" style="height: 253px" ></div> </td> </tr> </table>
3. Layers
JS:
ar map;
function InitializeMap() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
window.onload = InitializeMap;
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
HTML:
<div id="map" style="width: 304px; top: 68px; left: 172px; position: absolute; height: 238px">
4. Map Options
JS:
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var options =
{
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions:
{
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
poistion: google.maps.ControlPosition.TOP_RIGHT,
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE]
},
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.ZOOM_PAN
},
scaleControl: true,
disableDoubleClickZoom: true,
streetViewControl: true,
draggableCursor: 'move'
};
var map = new google.maps.Map(document.getElementById("map"), options);
}
window.onload = initialize;
HTML:
<div id ="map" style="height: 397px; width: 513px"></div>
5. Market Options
JS:
var map;
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker
(
{
position: new google.maps.LatLng(-34.397, 150.644),
map: map,
title: 'Click me'
}
);
var infowindow = new google.maps.InfoWindow({
content: 'Location info:<br/>Country Name:<br/>LatLng:'
});
google.maps.event.addListener(marker, 'click', function () {
// Calling the open method of the infoWindow
infowindow.open(map, marker);
});
}
window.onload = initialize;
HTML:
<div id ="map" style="height: 322px; width: 353px; top: 60px; left: 126px; position: absolute;"></div>
6. Multiple Marker
JS:
var map; var infowindow;
function InitializeMap() {
var latlng = new google.maps.LatLng(40.756, -73.986);
var myOptions =
{
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function markicons() {
InitializeMap();
var ltlng = [];
ltlng.push(new google.maps.LatLng(17.22, 78.28));
ltlng.push(new google.maps.LatLng(13.5, 79.2));
ltlng.push(new google.maps.LatLng(15.24, 77.16));
map.setCenter(ltlng[0]);
for (var i = 0; i <= ltlng.length; i++) {
marker = new google.maps.Marker({
map: map,
position: ltlng[i]
});
(function (i, marker) {
google.maps.event.addListener(marker, 'click', function () {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
infowindow.setContent("Message" + i);
infowindow.open(map, marker);
});
})(i, marker);
}
}
window.onload = markicons;
HTML:
<div id ="map" style="width: 896px; top: 51px; left: 32px; position: absolute; height: 400px"></div>
7. Reverse Geo Coding
JS:
var map;
var geocoder;
function InitializeMap() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions =
{
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function FindLocaiton() {
geocoder = new google.maps.Geocoder();
InitializeMap();
var address = document.getElementById("addressinput").value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
if (results[0].formatted_address) {
region = results[0].formatted_address + '<br />';
}
var infowindow = new google.maps.InfoWindow({
content: '<div style =width:400px; height:400px;>Location info:<br/>Country Name:<br/>' + region + '<br/>LatLng:<br/>' + results[0].geometry.location + '</div>'
});
google.maps.event.addListener(marker, 'click', function () {
// Calling the open method of the infoWindow
infowindow.open(map, marker);
});
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function Button1_onclick() {
FindLocaiton();
}
HTML:
<table> <tr> <td><input id="addressinput" type="text" style="width: 447px" /> </td> <td><input id="Button1" type="button" value="Find" onclick="return Button1_onclick()" /></td> </tr> <tr> <td colspan ="2"> <div id ="map" style="height: 478px; width: 691px;" ></div> </td> </tr> </table>
8. Your First Google Map
JS:
function InitializeMap()
{
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
}
window.onload = InitializeMap;
HTML:
<div id ="map" style="width: 304px; top: 68px; left: 172px; position: absolute; height: 238px"></div>
Các bạn có thể tham khảo để thực hiện trong các dự án của mình, chúc các bạn thành công!
Tuyệt vời, đúng cái mình đang cần (y)
Cảm ơn Hoàng đã ghé thăm 🙂