jQuery Girl
  1. jQuery Girl
  3. Comment append un marqueur sur google map avec deux emplacements?
Intereting Posts
jQuery slideDown avec les formulaires window.Open Open popup Au lieu d’une nouvelle fenêtre Déplacez l’élément de la liste en haut de la liste non ordonnée à l’aide de jQuery jqgird: problèmes de pagination depuis une table existante Angular: IE11 Lors de l’utilisation d’un élément de sélection multiple, la méthode de déclenchement de ng-repeat sur avec ng-mouseover échoue jQuery- cliquez sur une coordonnée sur une image pour y tracer un cercle Comment retransformer correctement un Recaptcha dans ASP.NET MVC 2 après un POST AJAX jQuery-UI ferme la boîte de dialog modale en un clic de fond info-bulle jquery avec des liens dessus Erreur lors du chargement de l’arrière-plan dans PrestaShop lors de l’utilisation du module homemodalwindow L’événement ne se déclenche pas lors du chargement initial jQuery: la hauteur de l’en-tête renvoie 0 sur les pages suivantes PhoneGap / Cordova: les animations JQuery s’exécutent lentement Rechercher tous les éléments ayant un atsortingbut de données donné (quelle que soit la valeur) Puis-je déclarer la logique sur jQuery pour le début et la fin d’un événement de défilement?

Comment append un marqueur sur google map avec deux emplacements?

J’aimerais append des marqueurs sur Google Map avec deux emplacements cliquables. Lorsque je clique sur le bouton, cela devrait changer le marqueur de carte avec l’emplacement. 

 var map; function initialize() { map = new google.maps.Map(document.getElementById('map-canvas'), { center: new google.maps.LatLng(52.302516, 16.414546), //Setting Initial Position zoom: 14, }); var marker = new google.maps.Marker({ position: newLocation(), map: map, title: 'AGM-CORP', icon: 'img/agm-marker.png' }); } function newLocation(newLat, newLng) { map.setCenter({ lat: newLat, lng: newLng }); } google.maps.event.addDomListener(window, 'load', initialize); $(document).ready(function () { $("#1").on('click', function () { newLocation(52.302516, 16.414546); }); $("#2").on('click', function () { newLocation(51.706478, 15.274753); }); });

Zobacz lokalizację:

 var map = null var marker = null; var myLatLng = { lat: 52.302516, lng: 16.414546 }; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(myLatLng.lat, myLatLng.lng), zoom: 14, }); marker = new google.maps.Marker({ position: myLatLng, map: map, title: 'Hello World!' }); } function updateMap(lat, lng) {; myLatLng.lat = lat; myLatLng.lng = lng map.setCenter(myLatLng); marker.setPosition(myLatLng); } $(document).ready(function() { $("#1").on('click', function() { updateMap(52.302516, 16.414546); }); $("#2").on('click', function() { updateMap(51.706478, 15.274753); }); });

Je commence la carte avec un nouveau marqueur. Jffiddle de travail est ici

cette fonction changera seulement l’emplacement de la vue: 

 map.setCenter({ lat: newLat, lng: newLng });

utilisez ceci à la place: 

 new google.maps.LatLng(-25.363882,131.044922);

Deuxièmement, vous devez append listner d’événements à l’object marqueur pour que celui-ci fonctionne correctement: 

 // create markers on the map marker1 = new google.maps.Marker({ ... }) marker2 = new google.maps.Marker({ ... }) marker3 = new google.maps.Marker({ ... }) // add event listener marker1.addListener('click', function() { ... }) marker2.addListener('click', function() { ... })

En outre, consultez la documentation, ils sont assez simples.

Cela fonctionnera. Avoir une variable globale qui contient le marker . Chaque fois que l’emplacement est modifié, définissez le marqueur sur la position de Lat et Lng à l’aide de la méthode setPosition et utilisez la méthode setCenter pour afficher le marqueur au centre. Pas besoin d’initier la carte à chaque fois. 

 var map,marker; function initialize() { map = new google.maps.Map(document.getElementById('googleMap'), { center: new google.maps.LatLng(52.302516, 16.414546), //Setting Initial Position zoom: 6, }); setLocation(52.302516,16.414546); } function setLocation(newLat, newLng) { var latlng = new google.maps.LatLng(newLat,newLng); if(marker) //Remove the marker, if already set { marker.setMap(null); } marker = new google.maps.Marker({ position: latlng, map: map, title: 'AGM-CORP' }); map.setCenter(latlng); } $(document).ready(function () { $("#1").on('click', function () { setLocation(13.070814558816117, 80.2656996835234); }); $("#2").on('click', function () { setLocation(59.4739316352335,-110.89646088128342); }); });