I am using ngMap, but the infowindows are not aligned with the markers. they usually appear to be about 50px up and left of their marker. I should note that it did work originally, then we changed from Mongo to SQL, and for some reason, it never aligned after that....
Screenshot
Template
<!-- the map -->
<ng-map
id="map"
scrollwheel="false"
class="row"
>
<marker
id="{{p.scheduleId}}"
ng-repeat="p in locatorGridData track by p.scheduleId"
position="{{p.latitude}}, {{p.longitude}}"
icon="{
url:'app/assets/img/placeholder.png',
scaledSize:[30,30]
}"
on-click="vm.selectFromMap(p)"
class="markers"
></marker>
<info-window id="infoWindow" visible-on-marker="vm.p.scheduleId">
<div ng-non-bindable="" ng-click="vm.selectFromMap({},vm.p)" style="cursor: pointer;">
<div class="practice-name">{{vm.p.locName}}</div>
<div class="name-specialty">{{vm.p.firstName}} {{vm.p.lastName}}, {{vm.p.speciality}}</div>
<div class="other-text-for-info-window">
{{vm.p.address1}}<br>
{{vm.p.city}}, {{vm.p.state}}<br>
{{vm.p.zip}}
</div>
</div>
</info-window>
</ng-map>
Controller
NgMap.getMap({id:'map'}).then(function(map) {
vm.map = map;
//GEOCODER
patientPos(vm.patientLat, vm.patientLon);
});
function patientPos(patientLat, patientLon) {
console.log(patientLat,patientLon, 'patient coordinate')
var bounds2 = new google.maps.LatLngBounds();
var latLng2 = new google.maps.LatLng($sessionStorage.patient_location.patientLat, $sessionStorage.patient_location.patientLon);
bounds2.extend(latLng2);
vm.map.fitBounds(bounds2);
vm.map.setZoom(12);
}
vm.showDetail = showDetail;
vm.hideDetail = hideDetail;
vm.selectFromMap = selectFromMap;
//info window stuff
function showDetail (e, p) {
vm.p = p;
console.log('showdetail', e, p)
vm.map.showInfoWindow('infoWindow', p.scheduleId);
};
function selectFromMap(e,p){
vm.p = p;
vm.map.showInfoWindow('infoWindow', p.scheduleId);
var getAllRows = $scope.grid1Api.core.getVisibleRows($scope.grid1Api.grid);
// c.log(getAllRows);
// console.log(schedules);
console.log(p)
vm.schedules.forEach(function(schedule,idx){
if(schedule.scheduleId == p.scheduleId){
$scope.grid1Api.selection.selectRow(vm.schedules[idx]);
console.log(schedules[idx]);
console.log(idx);
$scope.grid1Api.grid.getColumn('locName').filters[0] = {
term: vm.schedules[idx].locName
};
}
})
}
function hideDetail (e, p) {
if(vm.map){
vm.map.hideInfoWindow('infoWindow');
}
}
The invalid positioning of info window could be indeed related with input data. For example, for input data:
vm.locatorGridData = [
{
"scheduleId": "Red square,Moscow",
"latitude": 55.7539303,
"longitude": 37.618601
},
{
"scheduleId": 123, //Invalid key for marker, should be string
"latitude": 55.7469862,
"longitude": 37.5370785
}
];
the info window for the second marker will be incorrectly positioned:
vm.map.showInfoWindow('infoWindow', p.scheduleId);
The second parameter (marker id
) is expected to be provided as a string
to properly determine the marker.
angular.module('mapApp', ['ngMap'])
.controller('mapController', function ($scope, NgMap) {
var vm = this;
vm.locatorGridData = [
{
"scheduleId": "Red square,Moscow",
"latitude": 55.7539303,
"longitude": 37.618601
},
{
"scheduleId": 123, //"The Moscow city",
"latitude": 55.7469862,
"longitude": 37.5370785
},
/*{
"scheduleId": "Invalid POI",
"latitude": "55.7469862",
"longitude": -37.5370785
}*/
];
NgMap.getMap({ id: 'map' }).then(function (map) {
vm.map = map;
});
vm.selectFromMap = function (e, p) {
vm.content = p.scheduleId;
vm.map.showInfoWindow('infoWindow', p.scheduleId.toString());
};
});
.row {
width: 100%;
height: 240px;
}
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapController as vm">
<ng-map id="map" scrollwheel="false" class="row" center="[55.7539303,37.618601]" zoom="12">
<marker id="{{p.scheduleId}}" ng-repeat="p in vm.locatorGridData track by p.scheduleId" position="{{p.latitude}}, {{p.longitude}}"
on-click="vm.selectFromMap(p)" icon='{
"url":"https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png",
"scaledSize":[80,80]
}' class="markers"></marker>
<info-window id="infoWindow">
<h2>{{vm.content}}</h2>
</info-window>
</ng-map>
</div>