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
2
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 Related Articles
Load More By Dong
Load More In JavaScript