L'API Google Maps (v3) ajout/mise à jour des marqueurs

EDIT: Ça fonctionne maintenant, mais ne charge pas si l'utilisateur ne permet pas ou ont des services basés sur la localisation. Voir accepté de répondre à un commentaire pour jsfiddle exemple.

J'ai regardé à travers quelques tutoriels et des questions, mais je ne peux pas tranquille comprendre ce qui se passe (ou dans ce cas, ne se passe pas). Je suis le chargement de ma carte lorsque l'utilisateur clique sur un lien. Cette charge de la carte avec les utilisateurs de l'emplacement actuel dans le centre, et un marqueur à la position. Cependant, tous les marqueurs à l'extérieur de la if (navigation.location) ne semblent pas en charge. Ci-dessous mon code actuel:

function initialize() {
//Check if user support geo-location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var userLat = position.coords.latitude;
var userLong = position.coords.longitude;
var mapOptions = {
zoom: 8,
center: point,
mapTypeId: google.maps.MapTypeId.HYBRID
}
//Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
//Place a marker
new google.maps.Marker({
position: point,
map: map,
title: 'Your GPS Location'
});
});
} else {
var userLat = 53;
var userLong = 0;
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(userLat, userLong),
mapTypeId: google.maps.MapTypeId.HYBRID
}
//Place a marker
new google.maps.Marker({
position: point,
map: map,
title: 'Default Location'
});
//Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
<?
for ($i = 0; $i < sizeof($userLocations); $i++) {
?>
var userLatLong = new google.maps.LatLng(<? echo $userLocations[$i]['lat']; ?>, <? echo $userLocations[$i]['long']; ?>);
new google.maps.Marker({
position: userLatLong,
map: map,
title:"<? echo $userLocations[$i]['displayName'] . ', ' . $userLocations[$i]['usertype']; ?>"
});
<?
}
?>
}
function loadMapScript() {
if (typeof(loaded) == "undefined") {
$("#showMap").css("display", "none");
$("#showMapLink").removeAttr("href");
$("#map").css("height", "600px");
$("#map").css("width", "600px");
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=true&callback=initialize";
document.body.appendChild(script);
loaded = true;
} else {
alert("Map already loaded!");
}
}

loadMapScript() est appelée lorsque l'utilisateur clique sur un lien. Le php pour boucle boucle par le biais d'un pré-créé un tableau avec toutes les informations.

Je devine que je ne comprends pas tout, comme lorsqu'si j'ai mis:

var userLatLong = new google.maps.LatLng(53, 0);
new google.maps.Marker({
position: userLatLong,
map: map,
title:"Title"
});

dans la console (Google Chrome), j'obtiens l'erreur:

Error: Invalid value for property <map>: [object HTMLDivElement]

Je n'ai pas, cependant, obtenez des erreurs, sinon. Toute aide serait grandement appréciée! 🙂

Comment loadMapScript() appelée?
Lorsque l'utilisateur clique sur un lien pour loadMapScript()

OriginalL'auteur Joseph Duffy | 2012-05-07

navigator.geolocation.getCurrentPosition() est asynchrone.

Réorganiser votre code comme ceci:

var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.HYBRID
}
function initialize() {
//Check if user support geo-location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
makeMap(position.coords.latitude, position.coords.longitude, 'Your GPS Location');
});
} else {
makeMap(53, 0, 'DefaultLocation');
}
}
function makeMap(lat, lng, text) {
var point = new google.maps.LatLng(lat, lng);
mapOptions.center = point;
map = new google.maps.Map(document.getElementById("map"), mapOptions);
new google.maps.Marker({
position: point,
map: map,
title: text
});
<?php for ($i = 0; $i < sizeof($userLocations); $i++): ?>
var userLatLong = new google.maps.LatLng(<? echo $userLocations[$i]['lat']; ?>, <? echo $userLocations[$i]['long']; ?>);
new google.maps.Marker({
position: userLatLong,
map: map,
title:"<? echo $userLocations[$i]['displayName'] . ', ' . $userLocations[$i]['usertype']; ?>"
});
<?php endforeach ?>
}

Aussi, examiner ou initier l' $userLocations dans une variable JavaScript comme ceci:

var userLocations = <?php print json_encode($userLocations) ?>;

Ensuite exécutez votre boucle en JavaScript, au lieu de mélanger les langues.

Violon: jsfiddle.net/eSnhg/1
Déplacé le var mapOptions à l'intérieur de makeMap de sorte que je peut charger de la carte après le chargement de la page. Maintenant (il semble) pour travailler. Merci beaucoup!
Désolé, je dis un mensonge. Il n'est toujours pas de charge si l'utilisateur n'autorise pas l'emplacement (de ne pas avoir un emplacement est activé sur votre navigateur). Répétables sur votre jsfiddle exemple.
jsfiddle.net/eSnhg/2 - fixe. Ajouter une fonction pour gérer déni comme le deuxième paramètre à getCurrentPosition().
Magnifique, merci, j'ai besoin de se familiariser avec cette API 🙂

OriginalL'auteur benastan

Avez-vous essayé:

var map = null;
function initialize() { ... }

et ensuite de changer le code à l'intérieur:

map = new google.maps.Map( ... ); //make this the first line
if (navigator.geolocation) {
//Change the code from:
var map ...
//to:
map ...

Vous venez de référence de la carte (sans la var), partout ailleurs, donc ça devrait fonctionner.

OriginalL'auteur Sean Mickey

0

Changement:
```
 var map = new google.maps.Map(document.getElementById("map"), mapOptions);
```
:
```
map = new google.maps.Map(document.getElementById("map"), mapOptions);
```
En raison de var, votre carte de variable est liée à la à la portée de initialize(). Retrait il va la définir comme la carte de la variable (ou window.map), la mise à disposition à l'extérieur de la initialize() fonction.

Ce qui se passe est que vous avez un élément HTML <div id="map">. Dans de nombreux navigateurs, les variables globales sont créés à partir de l'élément html id, donc map est égal à document.getElementById('map').

Edit: en Fait, cela n'explique votre problème dans la console Chromée. Vous devez définir map avant d'essayer de fixer des marqueurs, comme vous le faites dans if (navigator.geolocation) {}. Cela explique aussi pourquoi aucun de la localisation de l'utilisateur marqueurs sont placés. Le code à placer fonctionne avant initialize(). Mettre ce code dans les initialize ou au sein de sa propre fonction, et d'appeler cette fonction à partir de initialize.

Le code qui ajoute des marqueurs est à l'intérieur de la initialize() fonction, et vient après la déclaration de map. Je n'ai fait repérer votre premier changement, mais comme vous le dites, ce n'était pas le problème.
Désolé pour le double post. J'ai aussi ré-essayé le changement initial, et également déclarer var map; en haut de la initialize() fonction, mais pas de joie.
Avez-vous testé sur un navigateur sans géolocalisation détection? navigator.geolocation.getCurrentPosition() est asynchrone, tandis que le code qui trace les points est synchrone. Elle s'exécute avant le rappel, dans lequel vous initialisez votre google map.
Je vais tester tout ça après, mais je l'ai essayé tout à l'heure, et la carte ne apparaît même pas. Pas d'erreurs, ne fonctionne tout simplement pas et mon div est vide.

OriginalL'auteur benastan
0

On dirait que vous êtes la création de la marque, mais ne pas faire quelque chose avec elle. Essayez de modifier votre nouveau Marqueur pour ressembler à ceci:
```
var marker = new google.maps.Marker({
position: point,  //this won't actually work - point is out of scope
title: 'Your GPS Location'
});
marker.setMap(map);
```
Edit: assurez-vous que le point est à l'intérieur de la carte!
```
var bounds = new google.maps.LatLngBounds();
bounds.extend(point);
map.fitBounds(bounds);
```
Ce n'est pas nécessaire; y compris un map propriété dans le cadre de la MapOptions objet qui est passé à la google.maps.Marker constructeur prend soin d'elle. Il ressemble à un problème de portée.
Essayé var userLatLong = new google.maps.LatLng(<? echo $userLocations[$i]['lat']; ?>, <? echo $userLocations[$i]['long']; ?>); var marker = new google.maps.Marker({ position: userLatLong, map: map, title:"<? echo $userLocations[$i]['displayName'] . ', ' . $userLocations[$i]['usertype']; ?>" }); marker.setMap(map); console.log('Adding marker at userLatLong = ' + userLatLong); Cela met un log dans la console, mais pas de marqueur. EDIT: Oups, c'est pas très bien mis en forme 🙁
Eh bien, je ne me souviens pas pourquoi, mais je l'ai fait dans mon code ci-dessus, et ça fonctionne 🙂 Mais le problème pourrait être que le point de la var n'est pas dans la portée.
êtes-vous sûr que le marqueur est à l'intérieur des limites de cartes affichées? Essayez de réinitialiser les limites que par mon montage.
J'ai été sortie de la position du repère dans la console, et je suis de (53, 0), ce qui est bien dans les limites. J'ai essayé d'autres valeurs, trop. Je vais ajouter votre tentez votre modifier après un peu de nourriture!

OriginalL'auteur chris

Vous devez vous connecter pour publier un commentaire.