CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsgoogle-maps-api-3
Hana
Hana

Reputation: 239

Marker does not show up on map angularjs

I am using angular-maps to create a map, with a list of markers. I have a problem displaying the markers. I have no errors though.

Here is my code:

Controller

var app = angular.module('mapController', []);

app.service('Map', function($q) {

this.init = function() {
    var options = {
        center: new google.maps.LatLng(45.7154289, 4.9317724),
        zoom: 14,
        disableDefaultUI: true    
    }
    this.map = new google.maps.Map(
        document.getElementById("map"), options
    );
    this.places = new google.maps.places.PlacesService(this.map);


  var markers = [{
  "title": 'Capgemini',
  "lat": '45.7154289',
  "lng": '4.9317724',
  "description": 'Capgemini'

    }];
var defaultMarkerColor = 'ff0000';
      var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + defaultMarkerColor);

  // marker object for the marker
  var marker = new google.maps.Marker({
    position: google.maps.LatLng(markers[0].lat,markers[0].lng),
    map: this.map,
    title: markers[0].title,
    animation: google.maps.Animation.DROP,
    icon: pinImage
  });
}

this.search = function(str) {
    var d = $q.defer();
    this.places.textSearch({query: str}, function(results, status) {
        if (status == 'OK') {
            d.resolve(results[0]);
        }
        else d.reject(status);
    });
    return d.promise;
}

this.addMarker = function(res) {
    if(this.marker) this.marker.setMap(null);
    this.marker = new google.maps.Marker({
        map: this.map,
        position: res.geometry.location,
        animation: google.maps.Animation.DROP
    });
    this.map.setCenter(res.geometry.location);
}

});

app.controller('mapController', function($scope, Map) {

$scope.place = {};

$scope.search = function() {
    $scope.apiError = false;
    Map.search($scope.searchPlace)
    .then(
        function(res) { // success
            Map.addMarker(res);
            $scope.place.name = res.name;
            $scope.place.lat = res.geometry.location.lat();
            $scope.place.lng = res.geometry.location.lng();
        },
        function(status) { // error
            $scope.apiError = true;
            $scope.apiStatus = status;
        }
    );
}

$scope.send = function() {
    alert($scope.place.name + ' : ' + $scope.place.lat + ', ' + $scope.place.lng);    
}

Map.init();
});

and the HTML :

 <ion-content ng-controller="mapController" style="margin-top: 25px">

<div class="container">

<div id="map" libraries="places" data-tap-disabled="true"></div>


 <form name="searchForm" novalidate 
ng-submit="search()">
    <div class="input-group">
        <input name="place" type="text" class="form-control" 
        ng-model="searchPlace" required autofocus />
        <br>
        <span class="input-group-btn">
            <button class="btn btn-primary" 
            ng-disabled="searchForm.$invalid">Search</button>
        </span>
    </div>
    </form>

</div>

The map shows up correctly, and centered on the coordinates I chose, but without a marker. I would appreciate any help.

Upvotes: 2

Views: 296

Answers (1)

rick
rick

Reputation: 1895

Hi took me sometime to put in place the fiddle... :)

I made this changes to make it work:

The markers: 

  var markers = [{
  "title": 'Capgemini',
  "lat": 45.7154289,
  "lng": 4.9317724,
  "description": 'Capgemini'
}];

And then the marker definition

var marker = new google.maps.Marker({
    position:{lat: markers[0].lat, lng: markers[0].lng},
    map: this.map,
    title: markers[0].title,
    animation: google.maps.Animation.DROP,
    icon: pinImage
  });

the easiest way is to use numbers for the coords.

here you can find the fiddle it isn't super clean and it is lot of debug stuff and most important if you can initialize and see the map you don't really need it.

hope this help

Upvotes: 1

Related Questions