controller.js
app.controller('MapCtrl', function($scope)
{
$scope.initMap= function() {
var myLatLng = {lat: -25.363, lng: 131.044};
directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: myLatLng
});
var infoWindow = new google.maps.InfoWindow({map: map});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
enableHighAcuracy:true,
timeOut:Infinity,
maximumAge:0,
lat: position.coords.latitude,
lng: position.coords.longitude
};
var marker = new google.maps.Marker({
position: pos,
map: map,
title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + pos.lat + "<br />Longitude: " + pos.lng
});
google.maps.event.addListener(marker, "click", function (e) {
infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(marker.title);
infoWindow.open(map, marker);
});
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['marker']
},
markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
draggable:true,
editable:true,
clickable:true
}
});
drawingManager.setMap(map);
directionsDisplay.setMap(map);
$scope.handleLocationError= function(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
};
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
};
$scope.calculateAndDisplayRoute= function(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
};
});
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="manifest" href="manifest.json">
<link href="css/style.css" rel="stylesheet">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/ngCordova/dist/ng-cordova.js"></script>
</script>
<script src="cordova.js"></script>
<script src="js/index.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/direction.js"></script>
<script src="js/constants.js"></script>
</head>
<body ng-app="travel" ng-controller="AppCtrl">
<ui-view>
</ui-view>
</body>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJof51Yq6OzYrim5YhNOqzS5DO7ajEUSM&libraries=drawing&&callback=initMap">
</script>
</html>
maps.html
<head>
<style>
#map {
height: 400px;
}
</style>
</head>
<ion-view title="Map">
<ion-content class="padding">
<label class="item item-input">
<span class="input-label">Source</span>
<input type="text" id="start">
</label>
<label class="item item-input">
<span class="input-label">Destination</span>
<input type="text" id="end">
</label>
<label>
<button class="button button-block button-positive" onclick="calculateAndDisplayRoute();">
Get Direction
</button>
</label>
</ion-content>
<div id="map">
</div>
</ion-view>
The code was working fine when it was executed independently but when I concatenate with other code it stops showing the map and it started showing error Cannot read property 'firstChild' of null
via Asad Arshad
No comments:
Post a Comment