Thứ Bảy, 7 tháng 9, 2013
hiển thị một tập điểm trên google map và canh giữa / display a set of location in google map v3
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<style type="text/css">
#map_container{
margin: auto;
}
</style>
<div id="map_container"></div>
<script>
$("#map_container").width($(document).width()-20).height($(document).height()-20);
var map = null;
var arrayMarker = new Array();
var bounds = new google.maps.LatLngBounds();
var address = "Quận Tân Bình, Việt Nam";
var arrayAddress=new Array(
"191/16 Trường Trinh, P.12, Quận Tân Bình, TP. Hồ Chí Minh",
"165/8 bạch đằng, p2, Quận Tân Bình, TP. Hồ Chí Minh",
"106A Phạm Phú Thứ, P.11, Quận Tân Bình, TP. Hồ Chí Minh",
"84 Lạc Long Quân p10, Quận Tân Bình, TP. Hồ Chí Minh",
"127/18 Hoàng Hoa Thám, phường 13, Quận Tân Bình, TP. Hồ Chí Minh",
"14 Lam sơn, Quận Tân Bình, TP. Hồ Chí Minh"
);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': address}, makeMapCallback(map, bounds, arrayMarker, arrayAddress));
function makeMapCallback(map,bounds,arrayMarker,arrayAddress){
var geocodeCallBack = function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 14,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_container"), myOptions);
for(var i = 0;i<arrayAddress.length;i++){
var address = arrayAddress[i];
var last=false;
if(i==arrayAddress.length-1){
last=true;
}
geocoder.geocode({'address':address }, makeMarkerCallback(map, bounds, arrayMarker, address,last));
}
}
}
return geocodeCallBack;
}
function makeMarkerCallback(map,bounds,arrayMarker,address,last) {
var geocodeCallBack = function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
,title : address
});
arrayMarker.push(marker);
bounds.extend(marker.getPosition());
var infowindow = new google.maps.InfoWindow({
content: address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(marker.get('map'), marker);
});
if(last){
map.fitBounds (bounds);
}
}
}
return geocodeCallBack;
}
</script>
</body>
</html>
<body>
<style type="text/css">
#map_container{
margin: auto;
}
</style>
<div id="map_container"></div>
<script>
$("#map_container").width($(document).width()-20).height($(document).height()-20);
var map = null;
var bounds = new google.maps.LatLngBounds();
var address = "99C/2F Cộng Hoà, Phường 04, Quận Tân Bình, TP. Hồ Chí Minh";
var arrayAddress=new Array(
"191/16 Trường Trinh, P.12, Quận Tân Bình, TP. Hồ Chí Minh",
"165/8 bạch đằng, p2, Quận Tân Bình, TP. Hồ Chí Minh",
"106A Phạm Phú Thứ, P.11, Quận Tân Bình, TP. Hồ Chí Minh",
"84 Lạc Long Quân p10, Quận Tân Bình, TP. Hồ Chí Minh",
"127/18 Hoàng Hoa Thám, phường 13, Quận Tân Bình, TP. Hồ Chí Minh",
"14 Lam sơn, Quận Tân Bình, TP. Hồ Chí Minh"
);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 14,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_container"), myOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
,title : address
});
bounds.extend(marker.getPosition());
var infowindow = new google.maps.InfoWindow({
content: address
});
for(var i = 0;i<arrayAddress.length;i++){
var address = arrayAddress[i];
// console.log(address);
geocoder.geocode({'address':address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
,title : address
});
bounds.extend(marker.getPosition());
var infowindow = new google.maps.InfoWindow({
content: address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(marker.get('map'), marker);
});
}
});
}
map.fitBounds (bounds);
}
});
</script>
</body>
</html>
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét