Google Map APIを使用している地図のマーカーが表示されない

Question

GoogleマップのAPIコードを統合しました。マップはうまく表示されていますが、マップマーカーは表示されません。

<div id="googleMap" style="width:100%;height:400px;"></div> 

<script> 
function myMap() { 
var centerPosition = {lat: 51.508742, lng: -0.120850}; 
var mapProp= { 
    center:new google.maps.LatLng(51.508742,-0.120850), 
    zoom:5, 
}; 
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 
var marker = new google.maps.Marker({ 
      position: centerPosition, 
      map: mapProp, 
      title: 'Hello World!' 
     }); 
} 
</script> 

<script src="https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_API_KEY&callback=myMap"></script> 

Answer 1

あなたは

map: mapProp,間違ったマップにマップを設定している - あなたに実装>map: map,

が機能：

var centerPosition = { 
    lat: 51.508742, 
    lng: -0.120850 
    }; 
    var mapProp = { 
    center: new google.maps.LatLng(51.508742, -0.120850), 
    zoom: 5, 
    }; 
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapProp); 
    var marker = new google.maps.Marker({ 
    position: centerPosition, 
    map: map, 
    title: 'Hello World!' 
    }); 

ワーキングJSFiddle：https://jsfiddle.net/6fey85dd/8/

Answer 2

ことがありますただあなたのマーカーに設定されたプロパティはmapPropマッピングしていないする必要があります。

VARマーカー=新しいgoogle.maps.Marker（{ 位置：中心位置、 マップ：マップ、 タイトル： '！のHello World' }） ; }