Googleマップ以外の場所でのピンのクリックの詳細

Question

私は場所についていくつかのGoogleマップを持っています。私がしたいのは、ユーザーが場所のピンをクリックしたときに、都市の詳細が示されている地図の下に詳細を表示したい場合です。

現在、マップ上にインフォボックスが表示されます。

JS

angular.module('mapsApp', []) 
.controller('MapCtrl', function ($scope) { 

    var mapOptions = { 
     zoom: 4, 
     center: new google.maps.LatLng(40.0000, -98.0000), 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    } 

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions); 

    $scope.markers = []; 

    var infoWindow = new google.maps.InfoWindow(); 

    var createMarker = function (info){ 

     var marker = new google.maps.Marker({ 
      map: $scope.map, 
      position: new google.maps.LatLng(info.lat, info.long), 
      title: info.city 
     }); 
     marker.content = '<div class="infoWindowContent">' + info.desc + '</div>'; 

     google.maps.event.addListener(marker, 'click', function(){ 
      infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content); 
      infoWindow.open($scope.map, marker); 
     }); 

     $scope.markers.push(marker); 

    } 

    for (i = 0; i < cities.length; i++){ 
     createMarker(cities[i]); 
    } 

    $scope.openInfoWindow = function(e, selectedMarker){ 
     e.preventDefault(); 
     google.maps.event.trigger(selectedMarker, 'click'); 
    } 

}); 

フィドル http://jsfiddle.net/livewirerules/n4gyywdc/3/

すべてのヘルプは

Answer 1

を理解されるであろうねえ、私は新しいjsfiddleにそのコードでhere

を作成している私には、以下の入力欄を配置しています都市の詳細 di vマーカーの詳細が表示されますが、私はタイトルのみを置いた参照用です。

ここでのhtml：

//Data 
var cities = [ 
    { 
     city : 'Toronto', 
     desc : 'This is the best city in the world!', 
     lat : 43.7000, 
     long : -79.4000 
    }, 
    { 
     city : 'New York', 
     desc : 'This city is aiiiiite!', 
     lat : 40.6700, 
     long : -73.9400 
    }, 
    { 
     city : 'Chicago', 
     desc : 'This is the second best city in the world!', 
     lat : 41.8819, 
     long : -87.6278 
    }, 
    { 
     city : 'Los Angeles', 
     desc : 'This city is live!', 
     lat : 34.0500, 
     long : -118.2500 
    }, 
    { 
     city : 'Las Vegas', 
     desc : 'Sin City...\'nuff said!', 
     lat : 36.0800, 
     long : -115.1522 
    } 
]; 

//Angular App Module and Controller 
angular.module('mapsApp', []) 
.controller('MapCtrl', function ($scope) { 

    var mapOptions = { 
     zoom: 4, 
     center: new google.maps.LatLng(40.0000, -98.0000), 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    } 

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions); 

    $scope.markers = []; 

    var infoWindow = new google.maps.InfoWindow(); 

    var createMarker = function (info){ 

     var marker = new google.maps.Marker({ 
      map: $scope.map, 
      position: new google.maps.LatLng(info.lat, info.long), 
      title: info.city 
     }); 
     marker.content = '<div class="infoWindowContent">' + info.desc + '</div>'; 

     google.maps.event.addListener(marker, 'click', function(){ 
      infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content); 
      infoWindow.open($scope.map, marker); 
      console.log(marker.title); 
      /* 
      *1. You can use the jquery selector as well, but for this example I used the pure javascript. 
      *2. You can access other values of marker here based on the requirement. 
      */ 
      document.getElementById("detail").value = marker.title; 
     }); 

     $scope.markers.push(marker); 

    } 

    for (i = 0; i < cities.length; i++){ 
     createMarker(cities[i]); 
    } 

    $scope.openInfoWindow = function(e, selectedMarker){ 
     e.preventDefault(); 
     google.maps.event.trigger(selectedMarker, 'click'); 
    } 

}); 

また、あなたがマーカーに来ているオブジェクトからデータを取得しますが、持つことができます。

<div ng-app="mapsApp" ng-controller="MapCtrl"> 
<div id="map"></div> 
<h2> 
    City Details 
</h2> 
<input id="detail"> 
</div> 

そしてここではjavascriptのコードです少しのコードを変更するこれがあなたを助けることを願っています。角度のバージョンについては

Answer 2

：

は、HTMLにこれを追加します。

<div id="divId"></div> 

//this line to on click function of marker. 
var myEl = angular.element(document.querySelector('#divId')); 
myEl.append('<p>' + marker.title + '</p>' + marker.content');