Subscribe Now

Trending News

Bài viết

8 Script Google Map (GMAP) hữu ích cho dân web design
HTML, JavaScript, Lập trình

8 Script Google Map (GMAP) hữu ích cho dân web design

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

Demo Download

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

Demo Download

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

Demo Download

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

Demo Download

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

Demo Download

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

Demo Download

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

Demo Download

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

Demo Download

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!

Demo All Download All

Bài viết liên quan

Theo dõi
Thông báo của
guest

2 Góp ý
Mới nhất
Cũ nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Hoàng
Hoàng
3 năm trước

Tuyệt vời, đúng cái mình đang cần (y)