0
Ich habe ein Modul gebaut, das Orte aus meiner DB liest und sie mit Googlemaps APi auf der Karte anzeigt. Zur Zeit, wenn die Seite geladen wird, erhalte ich eine Standortliste und sehe die Markierung auf der Karte, aber die Karte ist leer (grauer Bildschirm) und nur das Google-Logo wird angezeigt und die Max-Zoom-Taste. Ich habe nicht gefunden, was das Problem ist. dies ist mein Code: map.html:Google Map grau bleiben beim Start
<div class="page map" data-ng-controller="mapCtrl">
<div class="panel panel-default">
<div class="panel-heading " >
<h3 class="panel-title">
Locations
</h3><!-- panel-title h3 END -->
</div><!-- panel-heading div END -->
<div class="panel-body ">
<div ng-show="no_data">{{main.noDataMsg}}</div><!--if noDataFlag==true show noDataMsg div END-->
<div ng-show="!no_data">
<div class="container-fluid noPadding">
<div class="row-fluid">
<div class="col-md-12 noPadding">
<form>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search in Map Table" ng-model="searchMapTableData">
<div class="input-group-addon"><i class="fa fa-search"></i></div><!-- input-group-addon div END -->
</div><!-- input-group div END -->
</div><!-- form-group div END -->
</form><!-- form div END -->
</div><!-- col-md-12 div END -->
</div><!--row-fluid div END -->
<div class="row-fluid">
<div class="col-md-4 noPadding">
<div class="table_wrapper">
<table class="table table-bordered table-striped">
<thead fsm-sticky-header>
<tr>
<th>
<a href="" ng-click="sortType = 'timestamp'; sortReverse = !sortReverse">
Time
<span ng-show="sortType == 'timestamp' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'timestamp' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="" ng-click="sortType = 'latitude'; sortReverse = !sortReverse">
Latitude
<span ng-show="sortType == 'latitude' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'latitude' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="" ng-click="sortType = 'longitude'; sortReverse = !sortReverse">
Longitude
<span ng-show="sortType == 'longitude' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'longitude' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="item in locations_data | orderBy:sortType:sortReverse | filter:matchSearchInput(searchMapTableData)"
ng-class="{'selectedRowMap':$index == selectedRow}"
ng-click="setClickedRow($index)"
context-menu="menuOptions" model="'locations'" ng-model="locations_data" user-tag tag="{{item.user_tag}}">
<td data-ng-click="goToLocation(item)"> {{item.timestamp}} </td>
<td data-ng-click="goToLocation(item)">{{item.latitude}} </td>
<td data-ng-click="goToLocation(item)"> {{item.longitude}}</td>
</tr>
</tbody>
</table><!-- table END -->
</div>
<span class="load_more" lazyload category="locations">{{error_text}}</span>
</div><!--col-md-4 div END -->
<div class="col-md-8 noPaddingRight" ng-show="!no_data">
<div class="map_wrapper">
<ui-gmap-google-map control="map" refresh="true" events="map.events" center="center" zoom="map.zoom" draggable="true" language="en" options="options" >
<ui-gmap-markers models="randomMarkers" coords="'coords'" idKey="'id'" options="'options'" >
</ui-gmap-markers>
<ui-gmap-map-control>
<button type="button" class="btn btn-primary" data-ng-click="zoomToAllPoints()">MAX ZOOM</button>
</ui-gmap-map-control>
</ui-gmap-google-map>
</div>
</div><!-- col-md-8 div END -->
</div><!-- row-fluid div END -->
</div><!-- container-fluid div END -->
</div><!-- if noDataFlag== false show bookmarks information div END-->
</div><!-- panel-body div END -->
</div><!-- panel panel-default div END -->
mapCtrl.js:
/**
* Created by Netalie on 5/3/2016.
*/
angular.module('app').controller('mapCtrl', function ($scope, $rootScope, mainTarget, $timeout, uiGmapIsReady, $filter) {
$scope.category_name = 'locations';
$scope.locations_data = [];
$scope.main_array = [];
$scope.no_data = true;
$rootScope.$on('targetLoaded', function() {
//$scope.init();
});
$scope.options = {
width: 520,
height: 624
}
$scope.zoomToAllPoints = function() {
var markers = $scope.markerData; //some array;
$scope.bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
$scope.bounds.extend(markers[i]);
}
uiGmapIsReady.promise().then((function() {
$timeout($scope.setFitBounds, "100")
}));
};
$scope.init = function() {
$scope.window_height = $(window).height() - 290;
// console.debug('WINDOW HEIGHT IS: ',$scope.window_height);
angular.element('.angular-google-map-container').css('height', $scope.window_height + 'px');
$scope.selectedRow = null;
$scope.sortType = 'timestamp'; // set the default sort type
$scope.sortReverse = true; // set the default sort order
$scope.searchNetworks = ''; // set the default search/filter term
//$scope.locations_data = mainTarget.getProperty().locations;
$scope.noDataFlag = true;
var markers = [];
$scope.markerData = [];
if ($scope.locations_data != undefined) {
for (var i = 0; i < $scope.locations_data.length; i++) {
var label = "Longitude: " + $scope.locations_data[i].longitude + "\n" +
"Latitude: " + $scope.locations_data[i].latitude + "\n" +
"Timestamp:" + $scope.locations_data[i].timestamp;
var marker = {
id: $scope.locations_data[i].record_hash,
coords: {
latitude: $scope.locations_data[i].latitude,
longitude: $scope.locations_data[i].longitude
},
options: {title: label},
};
// console.debug('MARKER',marker);
var myLatlng = new google.maps.LatLng(parseFloat($scope.locations_data[i].latitude), parseFloat($scope.locations_data[i].longitude));
$scope.markerData.push(myLatlng);
markers.push(marker);
}
}
$scope.randomMarkers = markers;
if ($scope.locations_data != undefined) {
if ($scope.locations_data.length > 0) {
$scope.noDataFlag = false;
$scope.center = {latitude: markers[0].coords.latitude, longitude: markers[0].coords.longitude};
}
else {
$scope.noDataFlag = false;
}
}
else {
$scope.noDataFlag = false;
}
$scope.zoomToAllPoints();
}
$scope.setClickedRow = function (index) { //function that sets the value of selectedRow to current index
$scope.selectedRow = index;
}
$scope.goToLocation = function (item) {
$scope.center = {latitude: item.latitude, longitude: item.longitude};
// console.debug('goToLocation', $scope.center);
angular.extend($scope.map, {zoom: 15});
//$scope.map = {zoom: 15};
}
$scope.center = {latitude: 45, longitude: -73}
//$scope.init();
$scope.map = {zoom: 15};
$scope.setFitBounds = function() {
$scope.map.getGMap().fitBounds($scope.bounds);
};
//function for run filter on specific columns in the table
$scope.matchSearchInput = function (query) {
if ($scope.locations_data.length > 0) {
return function (item) {
return ($filter('uppercase')($scope.returnEmptyString(item.timestamp)).match($filter('uppercase')(query)) ||
$filter('uppercase')($scope.returnEmptyString(item.latitude)).match($filter('uppercase')(query)) ||
$filter('uppercase')($scope.returnEmptyString(item.longitude)).match($filter('uppercase')(query)));
}
}
};
//function check if string is null and return empty string
$scope.returnEmptyString = function (str) {
if (str == null) {
return '';
}
return str;
};
// listen for new_data event from the lazy load directive
$scope.$on('mainArrayLoaded', function (event, args) {
// console.debug("MAIN ARRAY LOADED",args);
$scope.locations_data = $scope.main_array;
$scope.init();
$scope.no_data = false;
});
});
überprüfen Sie Browser Konsolenprotokoll einen möglichen Fehler zu finden und nur minimale Codezeile – Aminul
i auf googleApiKey, mit Ausnahme von Warn jedoch, wenn ich den Browser klicken Sie nicht auf irgendwelche Fehler teilen auf F12 und schließen Konsole Die Karte wird geladen –