I am following this tutorial for building a MEAN app with Google Maps. I have the problem that the Map is not being shown at all. There are no errors in the browser console and when I tried debugging using node-inspector, I noticed that I can set breakpoints in the file containing the Angular Factory, which are not getting triggered. So I am wondering if it even gets called.
factory.js
angular.module('gservice', []).factory('gservice', function($http){
var googleMapService = {};
var stationLocations = [];
var selLat = 40.7831;
var selLong = -73.9712;
googleMapService.refresh = function(latitude, longitude){
//???
stationLocations = [];
$http.get('/stations').then(function(response){
stationLocations = convertToMapPoints(reponse.data);
initialize(latitude, longitude);
}).error(function(){console.log("error")});
};
var convertToMapPoints = function(reponse){
var stationLocations = [];
for(var i=0; i < reponse.length; i++) {
console.log(i);
console.log("hi");
var station = reponse[i];
var stationDetails =
'<p>Station Name: ' + station.StationName +
'</p>';
// Convert retrieved JSON to GMaps LatLong Format
stationLocations.push({
latlong: new google.maps.LatLng(station.Latitude, station.Longitude),
message: new google.maps.InfoWindow({
content: stationDetails,
maxWidth: 300
}),
stationName: station.StationName
});
}
return stationLocations;
};
var initialize = function(latitude, longitude) {
var startLatLong = {lat: 40.7831, lng: -73.9712};
if (!map){
console.log('no map yet');
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: startLatLong
});
}
locations.forEach(function(n, i){
var marker = new google.maps.Marker({
position: n.latlong,
map: map,
title: "Citigraph",
icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
});
google.maps.event.addListener(marker, 'click', function(e){
currentMarker = n,
n.message.open(map, marker);
});
});
var initLocation = new google.maps.LatLng(latitude, longitude);
var marker = new google.maps.Marker({
position: initLocation,
animation: google.maps.Animation.Bounce,
map: map,
icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
});
lastMarker = marker;
};
google.maps.event.addDomListener(window, 'load',
googleMapService.refresh(selLat, selLong));
return googleMapService;
});
This should get the div map and place a map there in the index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="style.css"/>
<!-- Google Maps API -->
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&sensor=true"></script>
<!-- JS Source -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="/node_modules/angular/angular.js"></script>
<!-- Angular Files -->
<script src="./app.js"></script>
<script src="./factory.js"></script>
</head>
<body>
<div class="container">
<div id="map"></div>
</div>
</body>
</html>
And app.js is just the following:
var app = angular.module('citigraph', ['gservice']);
But as mentioned, the page stays blank and there are no errors. I have been looking to fix it for hours, maybe someone here has an idea in what direction I should be looking to fix this?
Cheers
via Warhost
No comments:
Post a Comment