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

Mã giảm giá AZDIGI

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.GMAP GMAP GMAP Thư v...

Những quyển sách học PHP hay nhất 2017
Nên tắt ngay XML-RPC để ngăn chặn tấn công DDoS trên WordPress
8 Chrome Extensions hữu ích dành cho Front End Developer

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

Chia sẻ bài viết với:

COMMENTS

WORDPRESS: 2
  • comment-avatar
    Hoàng 12 tháng

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

  • Sunwah PearlHồ Tràm CoastarCoastar Hồ TràmCoastar EstatesKhu dân cư Nguyễn BìnhKDC Nguyễn BìnhDự án Nguyễn BìnhNam Việt ÁNine SouthĐất Hòa XuânĐất nền Hòa XuânDat Hoa XuanDat nen Hoa Xuan