Menu
I'm trying to migrate a simple Google Maps project (literally done from an example on their site) over to an AngularJS project. Let me preface this by saying that I'm new to both AngularJS and web dev, so please be kind :) I have a simple project up at https://github.com/eroth/angular-web-app (main files below) where I go from an initial commit using a Google Maps tutorial over to trying to convert it to an AngularJS app, but haven't been able to get it to work, although I've verified that my $scope.init() function in my MapController.js file is being called from my map.html file.
My question is two-fold: is it the case that something's wrong with my code, or do I need something like this (which looks to be very good): http://nlaplante.github.io/angular-google-maps/? I'm working on incorporating this into my project on another branch, but am trying to figure out if it's an issue with my existing code, or if I'd need something like this library to get it to work with AngularJS. If it's the latter, why? Apologizes in advance if it's some exceedingly simple mistake I'm making; as I said I'm pretty new to all this, although I did go through a few AngularJS tutorials and it seems great.
This is my map.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- INCLUDE REQUIRED THIRD PARTY LIBRARY JAVASCRIPT AND CSS -->
<script type="text/javascript" src="js/angular.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<!-- INCLUDE APPLICATION SPECIFIC CSS AND JAVASCRIPT -->
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true&language=en">
</script>
<script type="text/javascript" src="js/web-app/app.js"></script>
<script type="text/javascript" src="js/web-app/controllers/mainController.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container main-frame" ng-app="WebApp" ng-controller ="mainController" ng-init="init()">
<div id="map-canvas"/>
</div>
</body>
</html>
And this is my MapController.js file:
app.controller("mainController", function($scope, $http){
$scope.initialLocation;
$scope.siberia = new google.maps.LatLng(60, 105);
$scope.newyork = new google.maps.LatLng(40.7463, -73.9913);
$scope.browserSupportFlag = new Boolean();
$scope.map;
$scope.retina = window.devicePixelRatio > 1;
$scope.init = function () {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
console.log('In main init');
//first test——map uses hard-coded location, next will get user's location and pull deals
$scope.map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
// Try W3C Geolocation (Preferred)
if (navigator.geolocation) {
$scope.browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
$scope.initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var currentLat = position.coords.latitude;
var currentLon = position.coords.longitude;
$scope.map.setCenter($scope.initialLocation);
// performApiCall(currentLat, currentLon);
//definite custom map pin for user location & plot it on map
var pinColor = "5ea9ff";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.6|0|" + pinColor + "|0|_|k",
new google.maps.Size(25, 60),
new google.maps.Point(0,0),
new google.maps.Point(10, 24));
var marker = new google.maps.Marker({
position: $scope.initialLocation,
map: $scope.map,
icon: pinImage,
});
}, function() {
handleNoGeolocation($scope.browserSupportFlag);
});
}
// Browser doesn't support Geolocation
else {
$scope.browserSupportFlag = false;
handleNoGeolocation($scope.browserSupportFlag);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
alert("Geolocation service failed.");
$scope.initialLocation = newyork;
} else {
alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
$scope.initialLocation = siberia;
}
map.setCenter($scope.initialLocation);
}
};
google.maps.event.addDomListener(window, 'load', $scope.init);
});
Thanks in advance for any help!
948
asked Oct 04 '13 13:10
There are a couple of things wrong with your code. First, you are already calling the init() function of your scope in your mainController via defining it in the DOM with ng-init.
<div class="container main-frame" ng-app="WebApp" ng-controller ="mainController" ng-init="init()">
Which means you do not need the listener for window to be loaded to call the $scope.init - because this would run the function twice and in turn initialize your map twice. Remove the listener.
Second, there are a few instances where variables are being called which are actually part of the $scope object (newyork Ln 57, serbia Ln 60 and map Ln 62) - hence will throw a not defined error.
And lastly, you must set a height for the div container of your map in the CSS to actually see the map.
#map-canvas { height : 200px; }
/* if you want to set the height as a percentage of the parent div, remember to give a height to the parent div as well */
As for the second part of your question, I would definitely look into using what's already built. I haven't used the library you linked to, but if you say it's very good - why try to re-invent the wheel?
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
