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

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

14 min read
2
0
69
GMAP

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 JavaScriptHTML.GMAP GMAP GMAP

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

Load More In JavaScript

2 Comments

  1. Hoàng

    Tháng Chín 23, 2016 at 5:41 chiều

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

    Reply

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *