Google Maps JS API v3 - Simple marqueur multiple avec géolocalisation

Question

Google Maps JS API v3 - Marqueur simple simple avec géolocalisation
Merci, mais je gère avec le code ci-dessous. N'hésitez pas à l'améliorer!
1 Partie - des variables propres

var LocationCenter = null; 
var map = null; 
var approxCircle = null; 
var pinCircle = null; 
var marker = null; 

2 Partie - définir des emplacements de Variable

var locations = [ 
    ['Bondi Beach', -33.890542, 151.274856, 4], 
    ['Coogee Beach', -33.923036, 151.259052, 5], 
    ['Cronulla Beach', -34.028249, 151.157507, 3], 
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
    ['Maroubra Beach', -33.950198, 151.259302, 1] 
]; 

3 Partie - initialiser la fonction

function Newinitialize(lat,lng) { 
    LocationCenter = new google.maps.LatLng(lat,lng); 
    var myOptions = { 
     zoom: 14, 
     center: LocationCenter, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
map = new google.maps.Map(document.getElementById("map_canvasRoast"), myOptions); 

marker = new google.maps.Marker({ 
    position: LocationCenter, 
    map: map, 
    animation: google.maps.Animation.DROP 
    }); 

approxCircle = { 
    strokeColor: "#008595", 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: "#008595", 
    fillOpacity: 0.25, 
    map: map, 
    center: LocationCenter, 
    radius: 50, 
    clickable : false 
}; 

pinCircle = new google.maps.Circle(approxCircle); 
var infowindow = new google.maps.InfoWindow(); 
var marker, i; 

4 Partie - emplacements fixes

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][0]); 
     infowindow.open(map, marker); 
    } 
    })(marker, i)); 
} 

}; 

$('.goMap').live('click', function() { 
    if(navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position){ 
     Newinitialize(position.coords.latitude,position.coords.longitude); 
    }); 
    }else{ 
     Newinitialize(52.636161,-1.133065); 
    } 
}); 

DONE, maintenant je charge la page et la géolocalisation fonctionne très bien.

Answer 1

Configuration de la carte Google dans la fonction showPosition, quelque chose comme:

var map; 
function showPosition(position) { 
    var latlon=position.coords.latitude+","+position.coords.longitude; 

    x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;  

    map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 10, 
    center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
} 

De cette façon, les coordonnées seront disponibles avant initialisez Google Maps. Sinon, vous pouvez mettre à jour les coordonnées de la carte dans votre fonction showPosition (je ne suis pas sûr du code exact pour le faire).

Answer 2

Voilà comment vous re-centrer la carte à l'emplacement actuel de l'utilisateur:

function showPosition(position) 
{ 
    map.setCenter(new google.maps.LatLng(positions.coords.latitude, 
     position.coords.longitude)); 
} 

Cela vous permettra de créer la carte avant de recevoir l'emplacement de l'utilisateur.