谷歌地图 - 未捕获类型错误

Question

我有一个按钮，如果点击显示用户在地图上的位置。目前艰难的我得到这个错误Uncaught TypeError: Cannot set property 'position' of undefined

这是我的代码：

  <div class="col-sm-offset-4 col-sm-4"> 
      <input type="button" value="Show my location on Map" id="mapButton"> 
       <article></article> 
      </div> 

$('#mapButton').click(function() { 
$("#mapcontainer").remove(); 
function success(position){ 
    var mapcanvas = document.createElement('div'); 
    mapcanvas.id = 'mapcontainer'; 
    mapcanvas.style.height = '300px'; 
    mapcanvas.style.width = '300px'; 

    document.querySelector('article').appendChild(mapcanvas); 

    var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    alert(coords); 
    var options = { 
    zoom: 15, 
    center: coords, 
    mapTypeControl: false, 
    navigationControlOptions: { 
     style: google.maps.NavigationControlStyle.SMALL 
    }, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map("mapcontainer",options)[0]; 

    marker = new google.maps.Marker({ 
     position: coords, 
     map: map, 
     title:"You are here!" 
    }); 
} 

if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(success); 
} else { 
    error('Geo Location is not supported'); 
} 

}）;

它为什么会抛出这个错误？

JSFiddle

Answer 1

映射第一个参数，是一个div元素。强似 'mapcontainer'，通过

的document.getElementById（ “mapcontainer”）

Working example

var map = new google.maps.Map(document.getElementById("mapcontainer"),options)[0]; 
     var marker = new google.maps.Marker({ 
      'position': coords, 
      map: map, 
      title:"You are here!" 
     });