I am creating a trip view using google map with angularjs directive. All works fine except the google map fitbound to a latitude longitude collection. I have tried all the way to use the fitbounds methods but failed.
Thanks,
Below is my code efforts.
Directive:
<div class="trip-google-map" trip-map="" mapid="2" latitude="22.998673" longitude="72.514346"></div>
Directive Code:
app.directive('tripMap', function ($compile) {
return {
controller: function ($scope, $location, mapService) {
this.registerMap = function (myMap) {
mapService.setTripMap(myMap);
};
},
link: function (scope, elem, attrs, ctrl) {
var mapOptions,
latitude,
longitude,
mapStyles,
map;
latitude = attrs.latitude;
longitude = attrs.longitude;
mapStyles =
[
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#a2daf2"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [
{
"color": "#f7f1df"
}
]
},
{
"featureType": "landscape.natural",
"elementType": "geometry",
"stylers": [
{
"color": "#d0e3b4"
}
]
},
{
"featureType": "landscape.natural.terrain",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#bde6ab"
}
]
},
{
"featureType": "poi",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi.medical",
"elementType": "geometry",
"stylers": [
{
"color": "#fbd3da"
}
]
},
{
"featureType": "poi.business",
"elementType": "all",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffe15f"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#efd151"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [
{
"color": "black"
}
]
},
{
"featureType": "transit.station.airport",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#cfb2db"
}
]
}
];
mapOptions = {
zoom: 12,
disableDefaultUI: true,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: mapStyles,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
};
/*
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
*/
//google.maps.visualRefresh = true;
var map = new google.maps.Map(elem[0], mapOptions);
ctrl.registerMap(map);
scope.InitializeTripdetailController();
scope.$apply(function () {
window.setTimeout(function () {
google.maps.event.trigger(map, 'resize');
}, 100);
});
}
};
});
Controller Code:
app.controller('tripdetailController', ['$scope', '$rootScope', '$timeout', 'mapService', 'ngDialog', function ($scope, $rootScope, $timeout, mapService, ngDialog) {
$scope.tripPathPolylines = [];
var trips = [];
var insertTripLatlng = function (trip) {
var isExists = false;
for (var v in trips) {
if (trips[v].hash == trip.hash) {
isExists = true
break;
}
}
if (isExists == false) {
trips.push(trip);
}
}
function settrip() {
var marker;
var tripmap = mapService.getTripMap();
var bounds = new google.maps.LatLngBounds();
for (var j = 0; j < trips.length; j++) {
var ltlng = new google.maps.LatLng(trips[j].lat, trips[j].lng);
bounds.extend(ltlng);
marker = new google.maps.Marker({
position: ltlng,
map: tripmap
});
}
tripmap.fitBounds(bounds);
}
$scope.InitializeTripdetailController = function () {
var tripData = $scope.$parent.ngDialogData;
for (var p = 0; p < tripData.messages.length; p++) {
insertTripLatlng({ lat: tripData.messages[p].trackPoint.pos.lat, lng: tripData.messages[p].trackPoint.pos.lng, hash: tripData.messages[p].trackPoint.pos.lat + "-" + tripData.messages[p].trackPoint.pos.lng })
}
settrip();
}
}]);
FitBounds Code:
var tripmap = mapService.getTripMap();
var bounds = new google.maps.LatLngBounds();
for (var j = 0; j < trips.length; j++) {
var ltlng = new google.maps.LatLng(trips[j].lat, trips[j].lng);
bounds.extend(ltlng);
marker = new google.maps.Marker({position: ltlng,map: tripmap});
}
tripmap.fitBounds(bounds);
The map looks like:
It should be after fitbounds as:
Update: css for map:
Update: The map is loaded in ngDialog popup.
.trip-google-map {
width: 100%;
height: 450px;
}
