javascriptを使用してジオロケーションと複数のマーカーを結合する方法は？

Question

私は自分の位置を追跡できると同時に、複数のマーカーを表示できるマップを作成しようとしています。私は以下の2つのJavaScriptを組み合わせることができますか？どうすればいいのか分からないのですか？現在の位置について複数のマーカー

<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のため

のJavaScript

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

Answer 1

はい、それは、2つを組み合わせることも可能です。マップを初期化し、Hougang ...の位置をプロットした後、ジオロケーションコードを追加できます。私はジオロケーションの小さな緑色のアイコンを表示するデモを書きました。ブラウザがジオコーディングをサポートしていない場合は何も表示されませんが、エラーも表示されません。コードはハードドライブからローカルにロードされている場合

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

は、ジオロケーションが（少なくとも私にとっては）動作しませんに注意してください。それは公開されなければならない。

// 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

以下が作業サンプルであり、そのは私のプロジェクトで使用されて

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

} 
} 

それを呼び出すためにJSON文字列の下に使用します。

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