2015年6月11日木曜日

AngularJSのAngular Google Mapsでマーカーのクリック

AngularJSAngular Google Mapsでマーカーのクリックです。 モーダルウィンドウを表示するような感じでデザインできます。

コントローラーのJS
var mylat = document.getElementById("mylat").textContent;
var mylng = document.getElementById("mylng").textContent;
var myname = document.getElementById("myname").textContent;
$scope.map = { 
  center: { 
      latitude: mylat, 
      longitude: mylng 
    }, 
  zoom: 12
};
$scope.options = {scrollwheel: false};
$scope.marker = {
  id: 0,
  coords: {
    latitude: mylat,
    longitude: mylng
  },
  showWindow: false,
  options: {
    labelContent: 'ここ',
    labelAnchor: "10 0",
    labelClass: "marker-labels"
  }
};
$scope.windowOptions = {
  visible: false
};
$scope.onClick = function() {
  $scope.windowOptions.visible = !$scope.windowOptions.visible;
};
$scope.closeClick = function() {
  $scope.windowOptions.visible = false;
};
$scope.title = myname;
テンプレートのHTML
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
  <ui-gmap-marker idkey="marker.id" coords="marker.coords" options="marker.options" click="onClick()" events="marker.events" >
    <ui-gmap-window options="windowOptions" closeClick="closeClick()">
      <div><h2>{{title}}でーす!</h2></div>
    </ui-gmap-window>
  </ui-gmap-marker>
</ui-gmap-google-map>

実際に設定してみたサイトがこちら

参考サイト
API documentation(Angular Google Maps)

0 件のコメント:

コメントを投稿