angularjs google maps - les marqueurs avec fenêtre - infowindow ne montrant pas

Essayer d'obtenir une application à l'aide de angulaires-google-maps avec:

- plusieurs repères via le markers directive

- un seul infowindow via le window directive

J'ai été par le biais de l'API et de multiples fermé problèmes /questions sur le git-hub site, mais ne peut simplement pas de travail... :-/

jsfiddle

Pour des raisons de simplicité, je suis en déclarant les marqueurs manuellement (et ils sont afficher correctement):

$scope.markers = [
    {
        id: 0,
        coords: {
            latitude: 37.7749295,
            longitude: -122.4194155
        },
        data: 'restaurant'
    },
    {
        id: 1,
        coords: {
            latitude: 37.79,
            longitude: -122.42
        },
        data: 'house'
    },
    {
        id: 2,
        coords: {
            latitude: 37.77,
            longitude: -122.41
        },
        data: 'hotel'
    }
];

Le code html ressemble à:

<body ng-app="app">
    <div class="angular-google-map-container" ng-controller="MainCtrl">
        <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
            <ui-gmap-window coords="markers.coords" show="windowOptions.show" closeClick="closeClick()">
                <div>Hello</div>
            </ui-gmap-window>
            <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" events="markers.events" >
            </ui-gmap-markers>
        </ui-gmap-google-map>
    </div>
</body>

Je suis à l'application de la onClick fonction de la markers tableau à l'aide de ce code

$scope.addMarkerClickFunction = function(markersArray){
    angular.forEach(markersArray, function(value, key) {
        value.onClick = function(){
                $scope.onClick(value.data);
            };
    });
};

La marker click fonctions de ressembler à

$scope.windowOptions = {
    show: false
};

$scope.onClick = function(data) {
    $scope.windowOptions.show = !$scope.windowOptions.show;
    console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);
    console.log('This is a ' + data);
};

$scope.closeClick = function() {
    $scope.windowOptions.show = false;
};

La $scope.onClick() fonction semble être de travailler sur marker cliquez sur depuis la console de sorties de ce qui est attendu - et la $scope.windowOptions.show valeur permet de basculer entre true et false...

Je pense que c'est la façon dont je l'ai branché le window html pour le contrôleur d'ensembles et de fonctions ? Toute aide est appréciée.

P. S. La documentation de l'API exemples semblent hors de date, car ils n'utilisent pas show dans l'exemple, mais plutôt options.visible pour afficher et masquer les infowindows - mais alors tous les questions /exemples suggèrent d'utiliser show à la place ?

OriginalL'auteur goredwards | 2015-02-03

  1. 5

    De votre repère de liaison est incorrect dans la fenêtre de la directive.

    Fondamentalement, vous devez définir un marqueur sélectionné sur cliquez et lier la fenêtre pour que le marqueur sélectionné. Voir le jsfiddle pour un exemple. 

    <body ng-app="app">
<div class="angular-google-map-container" ng-controller="MainCtrl">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
        <ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show" closeClick="closeClick()">
            <div>Hello</div>
        </ui-gmap-window>
        <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" events="markers.events" >
        </ui-gmap-markers>
    </ui-gmap-google-map>
</div>

    http://jsfiddle.net/gqkmyjos/

    merci pour la solution rapide !!
    jsfiddle ne fonctionne plus. Des idées pourquoi?
    ouais, c'était de pointage à un elle n'est plus fixée version de la bibliothèque et le dernier code fonctionne légèrement différemment. Voir pour un exemple de travail jsfiddle.net/h11bxywo .
    Merci pour la mise à jour. Ressemble à la jsfiddle actions l'émission que j'ai eu indépendants de l'interface utilisateur-gmap-fenêtre instance chevauchements avec l'interface utilisateur-gmap-marqueurs de cas. Pour remédier à cela, je suis en utilisant le pixelOffset à partir de la Google docs comme ceci: pixelOffset: new window.google.maps.Size(0, -35) et puis la fenêtre d'information s'affiche au-dessus le marqueur que les utilisateurs attendent.
    Rappelez-vous, mon dernier commentaire devraient ai utilisé le $window Angulaire d'un service plutôt que de simplement window.

    OriginalL'auteur Myles

  2. 10

    Je sais que c'est un vieux post.

    Cependant, ces jours-ci j'ai eu du mal moi-même en essayant de le faire et, en outre, le jsfiddle de la accepté de répondre est cassé et ne fonctionne pas avec les dernières versions de angular-google-maps directive. Donc, j'ai décidé de partager un travail plunker en espérant que cela peut aider d'autres personnes.

    Plunker ici

    Cette version est rendu plusieurs marqueurs, mais une seule fenêtre. Une seule fenêtre peut être ouverte en même temps.

    Il est basé sur le conseille de le site officiel Section FAQ: Voir Comment ne puis-je ouvrir une fenêtre à la fois?

    html

    <ui-gmap-google-map center="map.center" zoom="map.zoom">

  <ui-gmap-window 
    show="map.window.show" 
    coords="map.window.model" 
    options="map.window.options" 
    closeClick="map.window.closeClick()"
    templateUrl="'infowindow.tpl.html'" 
    templateParameter="map.window">
  </ui-gmap-window>

  <ui-gmap-markers  
    models="map.markers" 
    coords="'self'"  
    events="map.markersEvents"
    options="'options'">
  </ui-gmap-markers>

</ui-gmap-google-map>

    js

    $scope.map = {
  center: {
    latitude: 39.5925511,
    longitude: 2.633202
  },
  zoom: 14,
  markers: [],  //Markers here
  markersEvents: {
    click: function(marker, eventName, model) {
      $scope.map.window.model = model;
      $scope.map.window.show = true;
    }
  },
  window: {
    marker: {},
    show: false,
    closeClick: function() {
      this.show = false;
    },
    options: {} 
  }
};

    Espère que cela aide.

    Bonjour @troig. que faire Si je veux envoyer des données par le biais de ce marqueur
    Salut @Sravan! Que voulez-vous dire avec "envoyer les données"? Pourriez-vous me donner un exemple?
    Hai, merci pour la réponse. Celui-ci est résolu, mais j'ai une question sur info de la fenêtre cliquez sur le marqueur. Je suis en train d'essayer, en tous lieux, mais n'obtenant pas de réponse, pouvez-vous svp me guider.De sorte que je vais expliquer mon problème.
    Avez-vous vu le plunker sur la réponse? Je pense qu'il n'a pas de problème avec le marqueur cliquez sur. Pour être en mesure de vous aider, j'ai besoin de plus d'infos...
    Ce sujet de l'information à partir de l'élément en question être utilisés pour un $de la fenêtre de la route en utilisant les informations de l'élément dans la création du marqueur? L'élément de l' :id à utiliser pour une route. Juste comment voulez-vous disposez d'un événement de clic sur un <a> tag dans un marqueur de la fenêtre.

    OriginalL'auteur troig

  3. 3

    Je sais que c'est vieux post, mais j'ai du mal avec Angulaire de la Carte de Google, et de résoudre les problème lorsque vous ouvrez une fenêtre pour les marqueurs. Si vous utilisez ng-repeat et fenêtre pour chaque pas de problèmes. Mais quand vous avez un des marqueurs de la directive, et que vous voulez montrer une seule fenêtre, alors vous avez un problème de fenêtre endroits qui ne sont pas au-dessus de marqueur et vous avez besoin de changer de position un peu. Comment faire? Permettez-moi de partager mon expérience.

    Vous avez juste besoin de spécifier pixelOffset pour windowoptions comme ça:

    JS:

    $scope.windowOptions = {
    pixelOffset : {
        height: -25,
        width: 0
    }
};

    HTML:

    <ui-gmap-window coords='selectedmarker.coords' show='true'  options='windowOptions'>
@{{ selectedmarker.tagline }}
</ui-gmap-window>

    Que c'est. Changement hauteur pour vos besoins.

    OriginalL'auteur d7p4x

  4. 0

    vous êtes meilleur réglage de la marque modèle dans le champ d'application sur cliquez sur quelque chose comme ceci:

    marqueur cliquez sur rappel:

    $scope.onClick = function(marker) {
  $scope.selectedMarker = marker.model;
}

    Puis utilisez le selectedMarker dans la directive:

    <ui-gmap-window coords="selectedMarker" show="windowOptions.show" closeClick="closeClick()">
            <div>Hello</div>
        </ui-gmap-window>

    simple. suppose que votre marqueur de modèle a la longitude et la latitude de définir la cause

    OriginalL'auteur Adam Spence