使用iPhoneの場所では、Googleマップ

Question

私はサイクル情報サイトを構築し、私は私のGoogleマップを更新自分のiPhoneからユーザーの場所を取得し、関連情報をユーザに提供することができるようにしたいのですが更新します。このためにHTML5オプションを使用するGeolocationと呼ばれるDrupalモジュールがあり、以下のモジュールでタスクを実行しているコードが見つかりました。

// START: Autodetect clientlocation. 
      // First use browser geolocation 
      if (navigator.geolocation) { 
      browserSupportFlag = true; 
      $('#geolocation-help-' + i + ':not(.geolocation-processed)').addClass('geolocation-processed').append(Drupal.t(', or use your browser geolocation system by clicking this link') +': <span id="geolocation-client-location-' + i + '" class="geolocation-client-location">' + Drupal.t('My Location') + '</span>'); 
      // Set current user location, if available 
      $('#geolocation-client-location-' + i + ':not(.geolocation-processed)').addClass('geolocation-processed').click(function() { 
       navigator.geolocation.getCurrentPosition(function(position) { 
       latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
       Drupal.Geolocation.maps[i].setCenter(latLng); 
       Drupal.Geolocation.setMapMarker(latLng, i); 
       Drupal.Geolocation.codeLatLng(latLng, i, 'geocoder'); 
       }, function() { 
       Drupal.Geolocation.handleNoGeolocation(browserSupportFlag, i); 
       }); 
      }); 
      } 

Google Maps API V3のこれ以上の実装経験はありますか？ユーザーが「マイ・ロケーション」をクリックするか、それと同等のものをクリックしてiPhoneのロケーションを使用してマップを自動的に要求するのではなく、マップを更新する必要があることを望みます。これは私のマップであり、私が持っているマーカーの配列です。どのように私はそれを更新するためにiPhoneの場所を利用することができますか？

function initialize() { 

    var myOptions = { 
    zoom: 14, 
    center: new google.maps.LatLng(51.51251523, -0.133201961), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var bikeLayer = new google.maps.BicyclingLayer(); 
    bikeLayer.setMap(map); 

    setMarkers(map, spots); 
} 


var spots = [ 

['Marylebone', 51.51811784, -0.144228881, '2.png', 2901, 'Broadcasting House - Marylebone</br>Available Bikes: 1</br>Number of Docks: 13</br> View more information about <a href="/node/2901">this dock</a>'], 


['Fitzrovia', 51.51991453, -0.136039674, '3.png', 2908, 'Scala Street - Fitzrovia</br>Available Bikes: 8</br>Number of Docks: 21</br> View more information about <a href="/node/2908">this dock</a>'], 


['Fitzrovia', 51.52351808, -0.143613641, '3.png', 2923, 'Bolsover Street - Fitzrovia</br>Available Bikes: 6</br>Number of Docks: 19</br> View more information about <a href="/node/2923">this dock</a>'], 


['Fitzrovia', 51.52025302, -0.141327271, '3.png', 2975, 'Great Titchfield Street - Fitzrovia</br>Available Bikes: 5</br>Number of Docks: 19</br> View more information about <a href="/node/2975">this dock</a>'], 


['Bloomsbury', 51.51858757, -0.132053392, '3.png', 2982, 'Bayley Street - Bloomsbury</br>Available Bikes: 12</br>Number of Docks: 25</br> View more information about <a href="/node/2982">this dock</a>'] 

]; 

function setMarkers(map, locations) { 

     var image1 = new google.maps.MarkerImage('amber-spot.png', 
     new google.maps.Size(30, 36), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 32)); 

    var shape = { 
     coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
     type: 'poly' 
    }; 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < locations.length; i++) { 
    var spot = locations[i]; 
    var myLatLng = new google.maps.LatLng(spot[1], spot[2]); 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     icon: spot[3], 
     title: spot[0], 
     zIndex: spot[4], 
     html: spot[5] 
    }); 
    bounds.extend(myLatLng); 
    map.fitBounds(bounds); 
    var infowindow = new google.maps.InfoWindow({ 
}); 

    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(this.html); 
    infowindow.open(map,this); 
}); 
    } 
} 

おかげ

リー

Answer 1

まず、あなたはボタンを押すから発射されるjavascript関数、またはリンクのクリックが必要になります。この関数は、html5で利用可能なジオロケーションapiを使用して、ユーザーがあなたの位置情報を提供しているかどうかを確認できます。関数の残りの部分は、GoogleマップのAPIを使用してその緯度経座標にパンし、ズームレベルを適切に設定します。 http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

そして、このサイトはあなたがやろうとしている基本的にはすべての偉大な概要を説明しています：ここで

はあなたが必要なメソッドを持っているGoogleマップAPIマップオブジェクトがある http://www.html5laboratory.com/geolocation.php

最後に「ドンデータベースまたはクライアント側のjavascript配列に場所を保存することを忘れないでください。データを保存している場合は、そのことをユーザーに警告して、プライバシーに関する影響を確認してください。