Googleマップapi open tab from geolocationからplaceId

Question

navigator.geolocation.getCurrentPositionからplaceIdへのルートで新しいGoogleマップタブを開くリンクを作成したいと思います。

const options = { 
    placeId: 'ChIJDyx4bNhu5kcRqJ3RkAPGMEk', 
    latitude: 48.925606, 
    longitude: 2.327621, 
}; 

const mapOptions = { 
    zoom: 15, 
    center: new google.maps.LatLng(options.latitude, options.longitude), 
}; 

const map = new google.maps.Map(document.getElementById('Map'), mapOptions); 
const service = new google.maps.places.PlacesService(map); 

service.getDetails({ 
    placeId: options.placeId, 
    }, (result, status) => { 
    if (status !== google.maps.places.PlacesServiceStatus.OK) { 
    alert(status); 
    return; 
    } 
    const marker = new google.maps.Marker({ 
    map: map, 
    position: result.geometry.location, 
    }); 
}); 

$('.js-ItinaryFromI').on('click',() => { 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition((position) => { 
     const pos = { 
     lat: position.coords.latitude, 
     lng: position.coords.longitude, 
     }; 
    },() => { 
     // The problem seems to come from this line : 
     window.open(`https://www.google.com/maps/dir/origin=pos&destination=place_id:${options.placeId}&travelmode=driving`, '_blank'); 
    }); 
    } else { 
    // And this line 
    window.open(`https://www.google.com/maps/dir//place_id${options.placeId}&travelmode=driving`, '_blank'); 
    } 
}); 

任意のアイデアをしてください。

ジオロケーションは、問題がある場合は、ここで を完了し、原点せずに新しいタブを開くには、私がしようと何ですか？

Answer 1

ロケーション間のルートを計算する場合は、Google Maps Directions APIを使用する必要があります。乗り継ぎ、運転、歩行、サイクリングなど、いくつかの交通手段のルートを検索することができます。

これらのパラメータ（起点、目的地、travel_mode）はGoogle Maps Directions APIで使用されており、おそらくGoogleマップを使用してうまく機能しません。

私も、特定の変数が要求に正しく連結されていないことにご注意ください。したがって、あなたの要求は正確な結果を提供しません。

は、ここで有効なリクエストのサンプルです：

window.open('https://maps.googleapis.com/maps/api/directions/json?origin='+pos.lat+','+pos.lng+'&destination=place_id:'+options.placeId+'&travelmode=driving&key=YOUR_API_KEY', '_blank'); 

各要求であなたのAPI keyを含めることを忘れないでください。

コードを少し修正しました。あなたは以下のことをチェックすることができます。

const options = { 
 
     placeId: 'ChIJDyx4bNhu5kcRqJ3RkAPGMEk', 
 
     //placeId: 'ChIJ51Ic7BXIlzMRK2WH8qoM6Ek', 
 
     latitude: 48.925606, 
 
     longitude: 2.327621, 
 
}; 
 

 
function initMap() { 
 
    const mapOptions = { 
 
     zoom: 15, 
 
     center: new google.maps.LatLng(options.latitude, options.longitude), 
 
    }; 
 

 
    const map = new google.maps.Map(document.getElementById('Map'), mapOptions); 
 
    const service = new google.maps.places.PlacesService(map); 
 

 
    service.getDetails({ 
 
     placeId: options.placeId, 
 
     }, (result, status) => { 
 
     if (status !== google.maps.places.PlacesServiceStatus.OK) { 
 
     alert(status); 
 
     return; 
 
     } 
 
     const marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: result.geometry.location, 
 
     }); 
 
    }); 
 
    
 
    if (navigator.geolocation) { 
 
     navigator.geolocation.getCurrentPosition((position) => { 
 
      const pos = { 
 
      lat: position.coords.latitude, 
 
      lng: position.coords.longitude, 
 
      }; 
 
      document.getElementById('js-ItinaryFromI').addEventListener('click',() => { 
 
      window.open('https://maps.googleapis.com/maps/api/directions/json?origin='+pos.lat+','+pos.lng+'&destination=place_id:'+options.placeId+'&travelmode=driving&key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ', '_blank'); 
 
      });   
 
     });  
 
    } else { 
 
     alert('Geolocation not found!'); 
 
    } 
 
     
 
} 
 

 

 
    
 
    
 

html,body,#Map { 
 
     width:100%; 
 
     height:100%; 
 
    }

<button id="js-ItinaryFromI">Click Me</button> 
 
    <div id="Map" ></div> 
 
<script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=initMap&libraries=places"> 
 
    </script>

をあなたはJSBinを使用して、これを試すことができます。なんらかの理由で、ここではStackoverflowのコードスニペットでは機能しません。どうしてか分かりません。

幸運と幸せなコーディング！