Wie Standortdetails auf Stift klicken außerhalb von Google Map

Question

Ich habe eine Google-Karte mehrere Details über einen Standort. Was ich tun möchte, ist, wenn ein Benutzer auf einen Standort Pin klickt, ich möchte die Details unter der Karte anzeigen, wo es City Details sagt.

Aktuell zeigt es die Infobox auf der Karte an.

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'); 
    } 

}); 

Fiddle http://jsfiddle.net/livewirerules/n4gyywdc/3/

Jede Hilfe wird

Answer 1

Hey ich habe das neue jsfiddle erstellt here

I platziert haben ein Eingabefeld unten in diesem Code erkannt werden, die stadt details di v zeigt Ihnen die Details des Markers, nur für die Referenz habe ich nur den Titel platziert.

Hier die html:

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

Und hier ist der Javascript-Code:

//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'); 
    } 

}); 

Sie können auch die Daten aus dem Objekt erhalten, die, in dem Marker kommt aber haben etwas Code ändern. Hoffe das wird dir helfen.

Answer 2

Für abgewinkelte Ausführung:

fügen Sie diese zu 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');