Googleマップのマーカーを表示するJavaScriptの外部リンク

Question

Googleマップのjavascriptでは、地図の左下に「Googleマップでこの領域を表示」というGoogleアイコンがクリック可能なリンクがあります。このリンクはGoogleマップを開きますが、提供される緯度/経度のみを中心とし、APIに提供するマーカーは表示されません。

    function initMap() { 
        map = new google.maps.Map(document.getElementById('gmap_holder'), { 
         center: {lat: 37.423021, lng: -122.083739}, 
         zoom: 15 
        }); 

        map.setOptions({draggable: false, zoomControl: true, scrollwheel: false, disableDoubleClickZoom: true}); 


        var coord = new google.maps.LatLng(37.423021, -122.083739); 

        var marker = new google.maps.Marker({ 
         position: coord, 
         map: map 
         }); 

       } 

私はマーカーが表示されますURLを生成する方法がある知っている、そのような例はhttp://maps.google.com/maps?q=loc:36.26577,-92.54324だろうが、私はAPIから見つけ出すように見えることはできません。

Answer 1

であるべき：

function initMap() { 
    var center = {lat: 37.423021, lng: -122.083739}; 

    var map = new google.maps.Map(document.getElementById('gmap_holder'), { 
    zoom: 4, 
    center: center 
    }); 

    var marker = new google.maps.Marker({ 
    position: center, 
    map: map 
    }); 

    // you can set other options 
} 

さらに詳しい情報：

1. あなたがここに必要なプロパティを見つけることができます：MapOptions

2. 例：Simple markers

を

編集： @Sefam、私は例といくつかの違いを見たので、あなたのコードを編集しました。違いがどこにあるかを示すために私の答えを編集しました。

function initMap() { 
    var map = new google.maps.Map(document.getElementById('gmap_holder'), { 
     center: {lat: 37.423021, lng: -122.083739}, // or try: 
     // center: new google.maps.LatLng(lat: 37.423021, lng: -122.083739), 
     zoom: 15 
    }); 

    map.setOptions({draggable: false, zoomControl: true, scrollwheel: false, disableDoubleClickZoom: true}); 

    var coord = new google.maps.LatLng(37.423021, -122.083739); // here you created instance of LatLng's class 

    var marker = new google.maps.Marker({ 
     position: coord, // instead this try: 
     //position: {lat: 37.423021, lng: -122.083739}, // here is a difference; or try: 
     //position: new google.maps.LatLng(lat: 37.423021, lng: -122.083739), 
     map: map 
    }); 
} 

それはあなたのAPIキーとコールバック機能をチェック動作しない場合：

<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
</script> 

はまた、CSSルールをチェックしてください。あなたのマップのheightを設定したのですか？私は、変異体および両方の作品の両方を使用し、私の実際に

center: {lat: 37.423021, lng: -122.083739} 
center: new google.maps.LatLng(lat: 37.423021, lng: -122.083739) 

position: {lat: 37.423021, lng: -122.083739} 
position: new google.maps.LatLng(lat: 37.423021, lng: -122.083739) 

：

また、私は、私はプロパティcenterとpositionを作成する二つの変形を与えた理由を説明したいと思います。

は組み合わせを試してみてください：

center: {lat: 37.423021, lng: -122.083739} //for var map 
position: {lat: 37.423021, lng: -122.083739} //for var marker 

center: new google.maps.LatLng(lat: 37.423021, lng: -122.083739) //for var map 
position: new google.maps.LatLng(lat: 37.423021, lng: -122.083739) //for var marker 

は、あなたが解決策を見つけるために私の編集した回答の助けを願っています。 答えがの場合、コンソールからエラーメッセージを投稿してください。エラーメッセージでより簡単に解決策を見つけることができます。

PS。 Googleマップを作成する必要があるときは、常にGoogle Maps APIの例を使用しています。常に役に立ちます。