2013-04-16 114 views
0

我想制作一个显示用户当前位置的谷歌地图,用户也可以点击地图添加标记。我可以单独做它们,但是当我试图将它们结合起来时,它会失败。谷歌地图和带标记的地理位置javascript

这是我的地理位置

function success(position) { 
    var mapcanvas = document.createElement('div'); 
    mapcanvas.id = 'mapcontainer'; 
    mapcanvas.style.height = '500px'; 
    mapcanvas.style.width = '600px'; 
    document.querySelector('article').appendChild(mapcanvas); 
    var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    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(document.getElementById("mapcontainer"), options); 
    var 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'); 
} 

代码,这是我的代码标记添加到地图中。

 var map; 
function initialize() { 
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
    var mapOptions = { 
    zoom: 4, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

    google.maps.event.addListener(map, 'click', function(event) { 
    placeMarker(event.latLng); 
    }); 
} 

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

    map.setCenter(location); 
} 
+1

结合你的脚本在这里:http://jsfiddle.net/xypgH/ –

回答