Come combinare geolocalizzazione e marcatori multipli usando javascript?

Question

Sto provando a creare una mappa in grado di tracciare la mia posizione e allo stesso tempo essere in grado di visualizzare più marker. Sono in grado di combinare il 2 JavaScript qui sotto? Se non hai idea di come dovrei farlo?

JavaScript per molteplici marcatori

<script type="text/javascript"> 
    var locations = [ 
    ['Hougang', 1.37265, 103.893658], 
    ['Punggol', 1.400617, 103.907833], 
    ['MacRitchie Reservoir', 1.346002, 103.825436], 
    ['Bishan', 1.352051, 103.849125], 
    ['Sentosa', 1.251226, 103.830757] 
]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: new google.maps.LatLng(1.37265, 103.893658), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 

    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)); 
    } 

JavaScript per la posizione corrente

navigator.geolocation.getCurrentPosition(function(position) { 
     var latitude = position.coords.latitude; 
     var longitude = position.coords.longitude; 
    } 

Answer 1

Sì, è possibile combinare le due cose. Quando si inizializza la mappa e dopo aver tracciato le posizioni di Hougang ... è possibile aggiungere il codice di geolocalizzazione. Ho scritto una demo che mostrerà un'icona verde più piccola per la geolocalizzazione. Se il browser non supporta la geocodifica non apparirà nulla, nessun errore mostrerà neanche.

DEMO http://jsfiddle.net/yV6xv/7/

Tenete a mente la geolocalizzazione non funziona (per me almeno) se il codice viene caricato localmente dal disco rigido. Deve essere servito pubblicamente.

// Check if user support geo-location 
if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var latitude = position.coords.latitude; 
     var longitude = position.coords.longitude; 
     var geolocpoint = new google.maps.LatLng(latitude, longitude); 

     var mapOptions = { 
      zoom: 8, 
      center: geolocpoint, 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     } 
     // Place a marker 
     var geolocation = new google.maps.Marker({ 
      position: geolocpoint, 
      map: map, 
      title: 'Your geolocation', 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png' 
     }); 
    }); 
} 

Answer 2

Il sotto è un esempio di lavoro e la sua in uso nel mio progetto

function AddInfoWidnow(marker,message) 
{ 
    var infowindow = new google.maps.InfoWindow({ content: message }); 

    google.maps.event.addListener(marker, 'click', function() { 

    infowindow.open(marker.get('map'), marker); 

    }); 

} 


function ShowOnMap(ContainerId, mapItems) { 

var DefaultLatLng= new google.maps.LatLng('12.967461', '79.941824'); 

var mapOptions = { 
    center: DefaultLatLng, 
    zoom: 10, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    marker: true 
}; 

var mapCust = new google.maps.Map(document.getElementById(ContainerId), mapOptions); 

var arrJsonObject = JSON.parse(mapItems); 

for (var y = 1; y <= arrJsonObject.length; y++) 
{ 

    var myLatLng1 = new google.maps.LatLng(arrJsonObject[y - 1].Latitude, arrJsonObject[y - 1].Lonngitude); 

    var marker = new google.maps.Marker({ 
    position: myLatLng1, 
    map: mapCust, 
    title: 'Marked at '+ arrJsonObject[y - 1].markedDate 
}); 

    addInfoWindows(marker,y-1,arrJsonObject); 


    marker.setMap(mapCust); 

} 
} 

utilizzare la sotto stringa JSON chiamarlo.

var mapItems='[ 
    { 
    "Latitude": "22.575897", 
    "Lonngitude": "88.431754", 
    "CustomerCode": "*$$$*", 
    "CustomerName": "*@@@*", 
    "markedDate": "2/20/2014 12:04:41 PM" 
    }, 
    { 
    "Latitude": "22.615067", 
    "Lonngitude": "88.431759", 
    "CustomerCode": "*$$$*", 
    "CustomerName": "*@@@*", 
    "markedDate": "2/20/2014 3:02:19 PM" 
    } 
]'; 
    ShowOnMap(containerId2, mapItems);