Chủ Nhật, 5 tháng 1, 2014

Google map Change Icon in radius


Sử dụng thư viện từ google
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places,visualization&v=3.exp"></script>
Thêm đoạn script
<script>
var map;
var infoWindow;
var service;
var distanceRange=10000;//1km
var types=['bank'];
var iconInRange="in_range.png";
var iconOutRange="out_range.png";
var mylocation = new google.maps.LatLng(-33.8668283734, 151.2064891821);
function initialize() {
   
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: mylocation,
    zoom: 10, 
  });

  infoWindow = new google.maps.InfoWindow();
  service = new google.maps.places.PlacesService(map);
       
  google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch); 
}

function performSearch() {
  var request = {
    bounds: map.getBounds(),   
    types:types
  };
  service.radarSearch(request, callback);
}

function callback(results, status) {
  if (status != google.maps.places.PlacesServiceStatus.OK) {
    alert(status);
    return;
  }
  for (var i = 0, result; result = results[i]; i++) {
    createMarker(result);
  }
}

function createMarker(place) {
        var distance1=1000;//1km
        //BEGIN DISTANCE           
        var glatlng1 = mylocation;
        var glatlng2 = place.geometry.location;
        //Fucntion Distance
        //alert(glatlng1.lng());
        var distance1=distance(mylocation,glatlng2);
        //alert(distance1);

        //END DISTANCE
        var marker;
        //IN
        if(distance1<distanceRange){
            marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location,     
                icon:iconInRange
            });
            //alert('in');
        }
        //OUT
        else{
            marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location,     
                icon:iconOutRange
            });
            //alert('out');
        }
 

  google.maps.event.addListener(marker, 'click', function() {
    service.getDetails(place, function(result, status) {
      if (status != google.maps.places.PlacesServiceStatus.OK) {
        alert(status);
        return;
      }
      infoWindow.setContent(result.name);
      infoWindow.open(map, marker);
    });
  });
}
//Fucntion Distance
function distance(location1,location2) {
    var lat1=location1.lat();
    var lon1=location1.lng();
    var lat2=location2.lat();
    var lon2=location2.lng();
    var R = 6371; // km (change this constant to get miles)
    var dLat = (lat2-lat1) * Math.PI / 180;
    var dLon = (lon2-lon1) * Math.PI / 180;
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) *
        Math.sin(dLon/2) * Math.sin(dLon/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c;
    //if (d>1) return Math.round(d)+"km";
    //else if (d<=1)
    return Math.round(d*1000);//meter   
    //return d;
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>



0 nhận xét:

Đăng nhận xét