CODEWITHSUNDEEP
angularjsgoogle-maps
24sharon
24sharon

Reputation: 1975

Angular google map marker

I add google map with marker on load the marker set up to center,

But when the user change the zoom or move right left the map, the marker position change and the marker move to center and not the same of the coords that i add on page load

this is my code:

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="false" options="options">
        <ui-gmap-marker idkey="'1'"  coords='map.center'
        icon='{url:    "//developers.google.com/.../beachflag.png" }'>
             <ui-gmap-window isiconvisibleonclick="true">
                            <p ng-cloak>Marker Clicked!</p>
             </ui-gmap-window>
         </ui-gmap-marker>
 </ui-gmap-google-map>

this is my map object

enter image description here

My Problem same as here: https://stackoverflow.com/questions/31113161/angular-google-map-marker-position-not-fixed-moving-when-map-moves-how-to-make

How can i add marker that fixed on place and if the user move left right or zoom the map the marker stay on the same original coords.

Thanks

Upvotes: 0

Views: 3821

Answers (2)

amit banerjee
amit banerjee

Reputation: 61

This code shows multiple marker in google map.



<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="https://code.angularjs.org/1.4.5/angular.js"></script>
<script src="https://combinatronics.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>

<div ng-app="mapApp" ng-controller="mapController">

    <map zoom-to-include-markers="true" style="display:block; width:900px; height:500px;">
        <marker ng-repeat="pin in markerData" position="{{pin.latitude}},{{pin.longitude}}" title="{{pin.title}}" on-click="showDetail(pin)"></marker>
        <info-window id="foo-iw">
           <div ng-non-bindable="">
                <h1>{{currentPin.title}}</h1><br/>
                <a href="{{currentPin.url}}">Click Here</a>
           </div>

        </info-window>
    </map>
</div>

<script>
angular.module('mapApp', ['ngMap'])
    .controller('mapController', function (NgMap, $scope, $q, $log) {

        NgMap.getMap().then(function(map) {
            $scope.map = map;
            //$scope.map.setZoom(13);
            var latlng = new google.maps.LatLng(37.0902, -122.636652);
            $scope.map.setCenter(latlng);
        });   

        $scope.currentPin = {title: "",url:""};
        $scope.markerData = [];
        $scope.cityMetaData = [];

        $scope.getCityInfo = function (country) {
            $scope.markerData = [];

            var data = [
                { cityName: ' Petaluma, CA, USA','url':'https://www.flipkart.com/' },
                { cityName: ' Jackson Heights, Queens, NY, USA','url':'https://www.flipkart.com/' },
                { cityName: ' UNICEF 6 Fairbridge Avenue Belgravia, Harare, Zimbabwe','url':'https://www.flipkart.com/' },
            ];


            data.forEach(function (item) {
                var cityData = item;
                $scope.cityMetaData.push(cityData);
                $scope.addressMarker(cityData);
            });
        }


        $scope.showDetail = function (e, pin) {
          $scope.currentPin = pin;
          $scope.map.showInfoWindow('foo-iw', this);
        };

        $scope.hideDetail = function () {
           $scope.map.hideInfoWindow('foo-iw');
        };

        $scope.addressMarker = function (cityItem) {
            var deferred = $q.defer();
            var address = cityItem.cityName;
            var url = cityItem.url;
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
                'address': address
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    $scope.$apply(function () {
                        $scope.markerData.push({
                            "latitude": results[0].geometry.location.lat(),
                            "longitude": results[0].geometry.location.lng(),
                            "title": results[0].formatted_address
                            ,"url": url
                        });
                    });
                } else {
                    $log.info('Geocode was not successful for the following reason:' + status);
                }
            });
        }
        $scope.getCityInfo();




    });
</script>

Upvotes: 1

Fissio
Fissio

Reputation: 3758

Your problem is that the ui-gmap-marker coords attribute is a reference to map.center, which changes whenever you move the map. You'll want to have an own controller variable for the marker, so it has its own location attribute. Something like this,

Controller:

// Map initialization
$scope.map = { center: { latitude: 32.0889, longitude: 34.8357 }, zoom: 16};

// Give the marker its own scope variable, you can attach other info here, too
$scope.marker = {coords: angular.copy($scope.map.center)}

HTML:

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="false" options="options">
    <ui-gmap-marker idkey="'1'"  coords='marker.coords'
        icon='{url:    "//developers.google.com/.../beachflag.png" }'>
        <ui-gmap-window isiconvisibleonclick="true">
            <p ng-cloak>Marker Clicked!</p>
        </ui-gmap-window>
    </ui-gmap-marker>
</ui-gmap-google-map>

EDIT: Forgot angular.copy first. Added plunkers demonstrating both broken and working behaviour.

Broken: http://plnkr.co/edit/nkecrOXm84V6lEVr85Yi?p=preview

Working: http://plnkr.co/edit/kvgLSeuKTPo6FKqIFE89?p=preview

Upvotes: 3

Related Questions