Search code examples
javascriptangularjsgoogle-mapsng-map

ngMaps: InvalidValueError: setPlace: not an Object


I'm customizing a google map with ngmaps (https://ngmap.github.io), google maps api and angularJS. What I want is to bring the marker of a place, look in the documentation of the api of google maps (https://developers.google.com/maps/documentation/javascript/reference?hl=en) and there is an option that is call "place" that according to I understand is to put the ID of the place. And when I load the web page it gives me this error in console "InvalidValueError: setPlace: not an Object". I can't find anything like that. My code it's:

var app = angular.module("app", ["ngMap"]);
<ng-map zoom="16" center="[-33.140981,-68.48775]">
    <marker
      place="ChIJycfzCxhdfpYRL"
      
      title="Cherry"
      position="[-33.140981,-68.48775]"
      z-index="1">
      	
      </marker>
</ng-map>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDR3Q2Db6TbqNpXecvdHERFxK3RBRII9f8"></script>

If anyone can help me I thank you very much!

Sorry for my English!

Regards!


Solution

  • According to MarkerPlace object specification place attribute accepts the following format:

    {"placeId": "<placeid>","location": {"lat": <lat>, "lng":<lng>}, "query": "<query>"}
    

    In your case place value could be specified like this:

    <marker place="{'placeId': 'ChIJycfzCxhdfpYRL','location': {'lat': -33.140981, 'lng':-68.48775}}" title="Cherry" z-index="1"></marker>
    

    Example

    angular.module('map-app', ['ngMap'])
    
        .controller('map-controller', ['NgMap',
            function (NgMap) {
               
            }]);
    <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="map-app" ng-controller="map-controller">
      <ng-map center="-33.140981,-68.48775" zoom="4">
        <marker place="{'placeId': 'ChIJycfzCxhdfpYRL','location': {'lat': -33.140981, 'lng':-68.48775}}" title="Cherry" z-index="1"></marker>
      </ng-map>
    </div>