Google Map Experience (Custom Map Controls)

1. Di chuyển panControl, zoomControl sang bên phải sử dụng thuộc tính ControlPosition

  • TOP_CENTER
  • TOP_LEFT
  • TOP_RIGHT
  • LEFT_TOP
  • TOP_LEFT
  • RIGHT_TOP
  •  TOP_RIGHT
  • LEFT_CENTER
  • TOP_LEFT
  • BOTTOM_LEFT
  • RIGHT_CENTER
  • TOP_RIGHT
  • BOTTOM_RIGHT
  • LEFT_BOTTOM
  • BOTTOM_LEFT
  • RIGHT_BOTTOM
  • BOTTOM_RIGHT
  • BOTTOM_CENTER
  • BOTTOM_LEFT
  • BOTTOM_RIGHT

2. Chi tiết tại:

http://code.google.com/apis/maps/documentation/javascript/controls.html

3. Ví dụ full màn hình với panControl, zoomControl bên phải

<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Maps API Example: Right-to-Left Text</title>
<meta charset="UTF-8">
<link href="/apis/maps/documentation/javascript/examples/default.css"
rel="stylesheet" type="text/css">

<style >
html, body {
height: 100%;
margin: 0;
padding: 0;
}

#map_canvas {
height: 100%;
}

@media print {
html, body {
height: auto;
}

#map_canvas {
height: 650px;

}
}
</style>
<script type=”text/javascript”
src=”http://maps.googleapis.com/maps/api/js?sensor=false&language=vi”&gt;
</script>
<script type=”text/javascript”>
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(21.0288760,105.851292);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl:true,
mapTypeControlOptions:
{
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_RIGHT
},
panControl:true,
panControlOptions:
{
position:google.maps.ControlPosition.RIGHT_TOP
},
zoomControl:true,
zoomControlOptions:
{
style: google.maps.ZoomControlStyle.LARGE,
position:google.maps.ControlPosition.RIGHT_TOP
}
}
map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);

}
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>
<body >

<div id=”map_canvas” style=”height:100%;position: relative; background-color: rgb(229, 227, 223); overflow: hidden;”>
</div>
</body>
</html>

Google Map API Example

<!DOCTYPE html>
<html dir=”rtl”>
<head>
<title>Maps API Example: Right-to-Left Text</title>
<meta charset=”UTF-8″>
<link href=”/apis/maps/documentation/javascript/examples/default.css”
rel=”stylesheet” type=”text/css”>
<script type=”text/javascript”
src=”http://maps.googleapis.com/maps/api/js?sensor=false&language=vi”&gt;
</script>
<script type=”text/javascript”>
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(21.0288760,105.851292);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);

google.maps.event.addListener(map, ‘zoom_changed’, function() {
setTimeout(moveToDarwin, 3000);
});

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:”Hello World!”
});
google.maps.event.addListener(marker, ‘click’, function() {
map.setZoom(8);
});
}

function moveToDarwin() {
var darwin = new google.maps.LatLng(20.5385744, 105.914079);
map.setCenter(darwin);
}

google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>
<body>
<p></p>
<div id=”map_canvas” style=”height: 600px;”></div>
</body>
</html>

 

Chi tiết tại:

http://code.google.com/apis/maps/documentation/javascript/examples/index.html

Google Maps JavaScript API

1.Google Maps JavaScript API V2 Basics
http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html

2.Google Maps Javascript API V3 Reference
http://code.google.com/apis/maps/documentation/javascript/reference.html

jQuery Plugins for Google Map

Nhận xét: Bạn có thể sử dụng trực tiếp API của Google map, tuy nhiên việc dùng các plugin sẽ giúp chúng ta đơn giản tiến trình nhúng maps tới website của mình.

1. gmap3
http://gmap3.net/

2. GOOGLE MAPS JQUERY PLUGIN V1.01 – SHAWN MAYZES
http://www.mayzes.org/googlemaps.jquery.html

3. googlemaps
http://www.dyve.net/jquery/?googlemaps

4. jQuery and Google Maps Tutorial: #1 Basics (Khá cụ thể)
http://marcgrabanski.com/articles/jquery-google-maps-tutorial-basics

Artem.GoogleMap Control

1. Download && Demo
http://googlemap.codeplex.com/

2. Nhúng Google map vào trang ASP.NET
http://www.tutorialsasp.net/uncategorized/embed-google-maps/

3. Trang chủ của Artem
http://googlemap.artembg.com/

4. Few steps to add Google Map to your Website (Có cả ví dụ download)
https://sites.google.com/site/shreeonweb/Home/coders-haven/fewstepstoaddgooglemaptoyourwebsite

5. CodeProject
http://www.codeproject.com/KB/custom-controls/Google-Maps-User-Control.aspx
http://www.codeproject.com/KB/custom-controls/Google-Map-Control-Part-2.aspx

6. Trang gốc của Google Map User Control
http://www.shabdar.org/asp-net/70-google-maps-control-for-aspnet-part-1.html