How to show only 1 marker on Google Maps?
Hi I have this weird problem with Google Maps V3 API. Showing multiple markers on a google map is fine, but when I only want to show a single marker on the map, I get no markers displaying?
The code below only shows a map with no markers.
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
marker1 = new google.maps.Marker({
position: new google.maps.LatLng(1.288693,103.846733),
map: map
});
Adding a second marker shows 2 markers on the map.
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
marker1 = new google.maps.Marker({
position: new google.maps.LatLng(1.288693,103.846733),
map: map
});
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(1.288693,103.846733),
map: map
});
So my question is, how do I only display a single marker on the map? Currently my workaround is to have 2 markers of the same lat/lng, but its not very elegant lol
Your first code block totally works for me. Here's the entire file I have where it's working, if this helps:
<html>
<head>
<title>Map Test</title>
<script type="application/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var latlng = new google.maps.LatLng(1.288693,103.846733);
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
</script>
</head>
<body>
<h1>Map</h1>
<div id="map_canvas" style="height:100%; width:100%;"></div>
<script>
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
marker1 = new google.maps.Marker({
position: new google.maps.LatLng(1.288693,103.846733),
map: map
});
</script>
</body>
</html>
to display one marker on v3 google maps i did mine like this
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP // map view, can be set to satellite, street, roadview, aerialview
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
animation: google.maps.Animation.DROP,
title: "Uluru (Ayers Rock)"
});
marker.setMap(map);
}
加载中,请稍侯......
精彩评论