1
カスタムマーカーを作成してクリックして情報ウィンドウを開きます。次に情報ウィンドウを閉じます。マーカーをもう一度クリックしようとしましたが、情報ウィンドウは開きません。他の2つのマーカーでうまく動作します。
以下はプランカサンプルです。
ありがとうございました。角度のあるGoogleマップでマーカーを2回目にクリックすることはできません
http://plnkr.co/edit/hzfAkQ5UJBLz3BZEy8M9?p=preview
'use strict';
angular.module('app', ['uiGmapgoogle-maps'])
.controller('locatorController', function($scope, $timeout, uiGmapGoogleMapApi) {
var pinSymbol = function(color) {
// console.log("color: "+color);
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: '#FFFFFF',
strokeWeight: 1.3,
scale: 1.3
};
}
$scope.map = {
center: {
latitude: 39,
longitude: -98
},
control: {},
zoom: 8,
window: {
model: {},
show: false,
options:{
pixelOffset: {width:-1,height:-20}
}
},
markers: [{
"id": "1",
"latitude": "39.05",
"longitude": "-98.55",
options: {
labelContent : '$23',
labelAnchor: "14 75",
labelClass: 'labelClass',
icon: pinSymbol('green'),
labelInBackground: false
}
}, {
"id": "2",
"latitude": "39.15",
"longitude": "-98.45"
}, {
"id": "3",
"latitude": "39.25",
"longitude": "-97.95"
}, ],
markersEvents: {
click: function(marker, eventName, model, args) {
$scope.$apply(function() {
\t \t $scope.map.window.model = model;
$scope.map.window.show = true;
});
}
}
};
})
.controller('templateController',function(){});.location-finder .angular-google-map,
.location-finder .angular-google-map-container {
\t height: 30em;
}
.selected {
background: #ddd;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div ng-app="app" ng-controller="locatorController" class="location-finder">
<ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control">
<!-- Map Pins -->
<ui-gmap-markers models="map.markers" idKey="'id'" coords="'self'" options="'options'" events="map.markersEvents">
</ui-gmap-markers>
<!-- InfoWindows -->
<!-- this works, but infowindow is not attached to marker -->
<ui-gmap-window
show="map.window.show"
coords="map.window.model"
templateUrl="'test'"
templateParameter="map.window.model"
options="map.window.options"
ng-cloak>
</ui-gmap-window>
<!-- try this instead of the above and the template does not load -->
<!-- <ui-gmap-window show="map.window.show" coords="map.window.model" templateUrl="'infowindow.tpl'" ng-cloak></ui-gmap-window>-->
</ui-gmap-google-map>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.js" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.1.0-X.5/angular-google-maps.js" charset="utf-8"></script>
<script src="script.js"></script>
</body>
</html>http://plnkr.co/edit/hzfAkQ5UJBLz3BZEy8M9?p=preview
マーカーの実装方法に問題がある可能性があります。あなたは、この前の[SOの質問]（http://stackoverflow.com/a/29896693/5995040）と[jsfiddle sample]（http://jsfiddle.net/svigna/pc7Uu/）を見てみることができます実装サンプルとこの[Angular Google Maps]（http://angular-ui.github.io/angular-google-maps/#!/）を使用して、AngularJS、マーカー、ウィンドウ、線、図形などのGoogle Mapsオブジェクトを理解する。 –
応答いただきありがとうございますが、どちらの例もGoogle Maps API v3を直接使用しています。角度のあるGoogle Maps APIを使用しようとしています http://angular-ui.github.io/angular-google-maps/ おそらく何か不足しています。 – userara