In this program you select one country, you get the list of cities and you select one city and the map will be generated of that country with the city at the center point of the map.
<html ng-app="app">
<head>
<script
src="angular.min.js"></script>
<!--<script
src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>-->
<script
src="js?sensor=false&language=en"></script>
<script>
app = angular.module('app',[]);
app.controller('MyCtrl',function($scope,$http){
$scope.jsonData = [];
$http.get("get_oracle_data.jsp?sqlStr=select distinct country from citieslatlong order by country")
.success(function(response) {
$scope.country = response;
})
.error(function(){
});
$scope.getCities = function() {
$http.get("get_oracle_data.jsp?sqlStr=select t.* from citieslatlong t where t.country = '" + $scope.country_name + "'")
.success(function(response) {
$scope.jsonData = response;
})
.error(function(){
});
}
$scope.getCityIndex = function() {
for(i=0;i<$scope.jsonData.length;i++)
{
if($scope.jsonData[i].CITY == $scope.city_name)
return i; //$scope.jsonData[i].ROWNUM;
}
return 0;
}
$scope.latlong = function(lat,long) {
var l = new google.maps.LatLng(lat, long);
return l;
}
$scope.mapProp = function(city){
return {
center:city,
zoom:5,
mapTypeId:google.maps.MapTypeId.SATELLITE
};
}
$scope.city = function(lat,long) {
return new google.maps.LatLng(lat, long);
}
$scope.gmap = function(dom){
var gm = new google.maps.Map(document.getElementById(dom),
$scope.mapProp($scope.latlong($scope.jsonData[$scope.getCityIndex()].LATITUDE,$scope.jsonData[$scope.getCityIndex()].LONGITUDE)));
return gm;
}
$scope.marker = function(data){
var m = new google.maps.Marker({
Title:data.CITY,
Name:data.CITY,
position:$scope.city(data.LATITUDE,data.LONGITUDE),
animation:google.maps.Animation.BOUNCE
});
return m;
}
$scope.infoWindow = function(marker) {
var w = new google.maps.InfoWindow({
content:marker.Name
});
return w;
}
$scope.CreateMap = function(dom){
var map = $scope.gmap(dom);
for(i=0;i<$scope.jsonData.length;i++)
{
var marker = $scope.marker($scope.jsonData[i]);
marker.setMap(map);
var iw = $scope.infoWindow(marker);
$scope.addMarkerListener(map,marker,iw);
}
//google.maps.event.addDomListener(window,'load',$scope.CreateMap(dom));
}
$scope.addMarkerListener = function(map,marker,iw){
google.maps.event.addListener(marker,'mousedown',function(){
iw.open(map,marker);
});
google.maps.event.addListener(marker,'mouseup',function(){
iw.close(map,marker);
});
}
});
</script>
</head>
<body ng-controller="MyCtrl">
Select Country: <select width=30px ng-model="country_name" name="country_name" id="country_name" ng-options="data.COUNTRY as data.COUNTRY for data in country" ng-change="getCities()"></select><br><br>
Select City: <select width=30px ng-model="city_name" name="city_name" id="city_name" ng-options="data.CITY as data.CITY for data in jsonData" ng-change='CreateMap("googleMap")'"></select>
<div id="googleMap" style="width:100%; height:100%">
</div>
</body>
</html>
We are giving you the link of a zipped archive which contains three files. gmap2.html, get_oracle_Data.jsp and lat_long.csv.
Link : https://drive.google.com/file/d/0BznrW3lgX0ozMnd1U200RWxoNDA/view?usp=sharing
You can also look at our youtube video :
Google Map with AngularJS and JSON data from Oracle database.
No comments:
Post a Comment