jQuery Girl
  1. jQuery Girl
  3. Comment obtenir des informations dans Google Maps sans événement de clic sur le marqueur et les afficher dans un div autre que infoWindow
Intereting Posts
jEditable soumettre sur TAB ainsi que sur ENTER Comment obtenir l’identifiant du noeud sélectionné dans jsTree? Comment résoudre l’affichage du pageur dans le JQgrid Float et Inline-block ne fonctionnent pas parfois dans webkit jQuery rond décimal à 0,49 ou 0,99 jQuery mobile (événement de clic) comment append un événement ou append un atsortingbut id à la balise img dans le dernier td de tr Itérer sur une collection jQuery sans avoir à reconstruire l’object jQuery Intégration de jQuery MixItUp dans un projet angular.js remplacement de la boîte de sélection jQuery typeError: impossible de lire la propriété ‘tigerStart’ de non définie Faire une capture modale figcaption Centrer verticalement et horizontalement, même lorsque la page est déroulée Faire la distinction entre les données de réussite et le message d’erreur à utiliser dans Struts 2? JQuery Draggable + Amener à l’avant

Comment obtenir des informations dans Google Maps sans événement de clic sur le marqueur et les afficher dans un div autre que infoWindow

Bonjour, je montre des marqueurs sur ma carte Google et sur le clic du marqueur, j’appelle l’événement click et affiche des informations sur cet endroit sur le côté droit (zone autre que Carte et non comme une fenêtre d’information). Maintenant, cet événement est déclenché par clic et, par défaut, lorsque la page est chargée, ma div rest vide. Comment puis-je afficher les informations de base de la division une fois que la carte est chargée? Je dois afficher les informations correspondant au marqueur qui constitue le point central de la carte. Plus tard, lorsque les utilisateurs cliquent sur les icons de marqueur, les informations doivent changer et correspondre au marqueur sur lequel l’utilisateur a cliqué.

J’ai essayé quelque chose mais ça ne marche pas: 

function loadMap() { var myLatlng = new google.maps.LatLng(40.46998, -3.68705); var myOptions = { zoom: 3, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map"), myOptions); var places = []; places.push(new google.maps.LatLng(51.43581, -0.51744)); places.push(new google.maps.LatLng(48.87187, 2.31764)); places.push(new google.maps.LatLng(45.45979, 9.19681)); var infowindow; for(var i = 0; i<places.length; i++) { var marker= new google.maps.Marker({ position: places[i], map: map, title: 'Place' + i }); (function (i,marker){ google.maps.event.addListener(marker, 'click' , function() { infowindow.setContent('PLace Number' + i) infowindow.open(i, marker) }); });(i, marker); } } $("document").ready(function () { loadMap(); });

MISE À JOUR ÉDITÉ

En gros, j’ai besoin de quelque chose comme les fonctionnalités de calque KML

Mais les informations devraient apparaître par défaut à droite pour la première fois. Plus tard, lorsque l’on clique sur le marqueur, l’information devrait changer. Je ne suis pas non plus catégorique sur le fait que j’ai besoin de cette information dans un fichier kml (xml me convient également). Je peux juste avoir un marqueur et des informations devraient apparaître sur le clic et pour la première fois être par défaut aussi selon l’emplacement de l’utilisateur.

Conclusion: j’ai besoin que les informations apparaissent au clic d’un marqueur et, par défaut, lorsque la page se charge, les informations doivent apparaître correspondant au point central de la carte. ce qui signifie que les utilisateurs venant de différents endroits verront des informations différentes correspondant à leur emplacement d’où ils viennent (je centre la carte en fonction de l’emplacement des utilisateurs).

Vous pouvez utiliser l’événement addDomListener de l’API Google Maps. Quelque chose comme ça:

Bien que le code ci-dessus soit le code de l’API Maps Javascript, la méthode addDomListener () se lie à l’object window du navigateur et permet à l’API de communiquer avec des objects situés en dehors du domaine normal de l’API.

lecture complémentaire

En fait, l’idée de base est que vous devez lire un fichier XMl, parsingr les données et l’afficher dans un div séparé à droite., Ce div que vous pouvez créer dynamicment lorsque vous chargez la carte, par exemple: 

 $("#body").append("
")

À partir de Google Docs dans la section sur InfoWindow:

Notez que si vous appelez open () sans passer de marqueur, InfoWindow utilisera la position spécifiée lors de la construction via l’object Options InfoWindow.

Dans votre code, pourquoi ne pas simplement initialiser votre infoWindow et appeler la méthode open() ? Je ne suis pas particulièrement familiarisé avec les API, mais que dire de: 

 var infowindow = new google.maps.InfoWindow({ content: 'your initial text' }); infowindow.open();

Ou si vous avez besoin du marqueur à des fins spéciales dans l’infowindow, initialisez un marqueur avec la position centrale et utilisez-le dans l’ infowindow.open(your_initial_pos) .

Vous pouvez utiliser jQuery pour .sortingger() un événement de click sur le premier marqueur de document.ready : 

 $(marker).sortinggger('click');

Cela va exécuter le code que vous avez déjà écrit et faire en sorte que lorsque la page se charge, votre div sera remplie avec les données de l’élément sur lequel vous avez déclenché le clic.

Lorsque vous liez à document.ready vous n’avez pas besoin d’encapsuler le document entre guillemets: 

 $(document).ready(function () {...});

Ou vous pouvez utiliser le raccourci si vous aimez ce genre de chose: 

 $(function () {...});

METTRE À JOUR

Vous pouvez placer l’appel de la fonction de déclenchement après la boucle for où vous configurez les marqueurs: 

 for(var i = 0; i

Vous pouvez déclencher un événement en mosaïque sur l’object de la carte. Consultez la référence de la carte pour les événements

Les tuiles chargées attendent que les tuiles de la carte soient réellement chargées avant de tirer. En utilisant votre code, vous pourriez faire quelque chose comme ça: 

 function loadMap() { var myLatlng = new google.maps.LatLng(40.46998, -3.68705); var myOptions = { zoom: 3, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map"), myOptions); google.maps.event.addListener(map, 'tilesloaded', function() { doSomething(); });