Google maps marker не отображается

Я новичок в API карт google и использую код ниже. Каким-то образом маркер не отображается на карте. Я использую Google Maps API v3.Google maps marker не отображается

.controller('MapCtrl', ['$scope', 
     function MapCtrl($scope) { 
      var ll = new google.maps.LatLng(38.895112, -77.036366); 
      $scope.mapOptions = { 
      center: ll, 
      zoom: 12, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
      $scope.onMapIdle = function() { 
       if ($scope.myMarkers === undefined){  
      var marker = new google.maps.Marker({ 
      map: $scope.myMap, 
      position: ll 
      }); 
      $scope.myMarkers = [marker, ]; 
     } 
    }; 
      $scope.markerClicked = function(m) { 
      window.alert("clicked"); 
    }; 

} 
    ])

html-код выглядит следующим образом;

<div ng-app='localAdventuresApp'> 
    <div ng-controller="MapCtrl"> 
     <div id="map_canvas" ui-map="myMap" 
     style="height:300px;width:400px;border:2px solid #777777;margin:3px; border:1px solid" 
     ui-options="mapOptions" 
     ui-event="{'map-idle' : 'onMapIdle()'}" 
     > 
     </div> 
       <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]" 
         ui-event="{'map-click': 'markerClicked(marker)'}"> 
     </div> 
    </div> 
</div>

источник

2013-09-06 Newbee

Откуда: $ scope.myMap? Где объект 'google.maps.Map' создается и присваивается' $ scope.myMap'? –

Андре, какие изменения вы предлагаете в моем коде? – Newbee

Андре спрашивает, где у вас в коде есть что-то подобное: '$ scope.myMap = new google.maps.Map (document.getElementById ('map-canvas'), mapOptions);' Похоже, вы не инициируете карта. – winkerVSbecks

Попробуйте следующий код

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<title>Simple markers</title> 
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script> 
function initialize() { 
var myLatlng = new google.maps.LatLng(38.895112,-77.036366); 
var mapOptions = { 
zoom: 4, 
center: myLatlng, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
} 
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    title: 'Hello World!' 
}); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

</script> 
</head> 
<body> 
<div id="map-canvas"></div> 
</body> 
</html>

источник

2013-09-06 12:28:26

vinod, этот ответ помог. Я изменил функциональную часть моего кода, и он сработал. – Newbee

На самом деле, это для AngularJS + Google MAPS V3 + UI-MAP

Если маркеры не отображаются при запуске карты, это потому, что карта все еще не загружен , я основал одно решение для решения этой проблемы:

В HTML Вы заявляете UI-событие с «картой-tilesloaded» ведьмой спуски на картах события «tilesloaded»:

<div ui-map="myMap" class="map-canvas" 
     ui-event="{'map-tilesloaded': 'maploaded()'}" 
     ui-options="mapOptions"> 
</div> 
<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]" 
     ui-event="{'map-click': 'openMarkerInfo(marker)'}"> 
</div>

Тогда в контроллере вы можете add markers:

$scope.maploaded = function() { 
    $scope.myMarkers.push(new google.maps.Marker({ 
     map: $scope.myMap, 
     position: new google.maps.LatLng(mylat, mylon) 
     })); 
};

источник

2014-02-04 10:45:19 user2549726

Google maps marker не отображается

ответ

Смежные вопросы