CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsgoogle-maps-api-3
Sudhir MN
Sudhir MN

Reputation: 125

Google map marker is not showing in exact location

In my project, I have integrated google map. I am having one problem : when I search for a particular location, the marker is not displaying at the current point, it is showing somewhere else. However, latitude and longitude are correct, could you help me to understand what I am missing ?

Note: For some locations, the marker is displayed on the correct location.

Html code :

<input ng-model="address" class="form-control" ng-map-autocomplete/>
<ng-map zoom="18" center="{{address}}" style="width:650px; height:450px">
    <marker position="{{address}}" title="{{address}}"  draggable="true"></marker>
</ng-map>

Controller:

$scope.$watch(function ($scope) { return $scope.chosenPlaceDetails }, function () {
    if (angular.isDefined($scope.chosenPlaceDetails )) {
        $scope.latitude= $scope.chosenPlaceDetails.geometry.location.lat();
        $scope.longitude=$scope.chosenPlaceDetails.geometry.location.lng();
    }
});

Upvotes: 0

Views: 957

Answers (1)

Roux
Roux

Reputation: 313

According to Ng-map-autocomplete doc, {{address}} is only the value used for the autocomplete. You can attach a "detail" value which will contain the lat and long of your location.

    <input type="text"  ng-map-autocomplete ng-model="autocomplete" options="options" details="details"/>

Then, in your ng-map directive, you can access the lat and long

<ng-map zoom="18" center="{{details.geometry.location.lat}},{{details.geometry.location.lng}}" style="width:650px; height:450px">
    <marker position="{{details.geometry.location.lat}},{{details.geometry.location.lng}}" title="{{address}}"  draggable="true"></marker>
</ng-map>

If you want to update in your controller, you can put a $watcher on details

$scope.$watch('details', function (newValue, oldValue) {
if (oldValue == undefined){
  $scope.latitude = 0 /*default value */
  $scope.longitude= 0 /*default value */
}
 $scope.latitude= newValue.geometry.location.lat;
$scope.longitude=newValue.geometry.location.lng;
});

then you can access the position in the ng-map directive with your new variables.

<ng-map zoom="18" center="{{latitude}},{{longitude}}" style="width:650px; height:450px">
    <marker position="{{latitude}},{{longitude}}" title="{{address}}"  draggable="true"></marker>
</ng-map>

Hope it helps. Source: https://github.com/iazi/ngMapAutocomplete

Ps: Code not tested, I merely try to recreate what I did month ago

Upvotes: 0

Related Questions