How to add a Red balloons marker in this google map api?
I want to add a google map(with street view) in my site. I use this code. when I clicked the point on the map, it can change the street view to this part and show the click point information. But how to add a Red balloons marker in the click point? Then I click in the other point, the first Red balloons marker will move to the new point.( just click for move the marker, not drag the marker). Thanks.
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API Sample</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" type="text/javascript"></script>
<script type="text/javascript">
var map;
var myPano;
var panoClient;
var nextPanoId;
function initialize() {
var fenwayPark = new GLatLng(42.345573,-71.098326);
var fenwayPOV = {yaw:370.64659986187695,pitch:-20};
panoClient = new GStreetviewClient();
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(fenwayPark, 15);
GEvent.addListener(map, "click", function(overlay,latlng) {
panoClient.getNearestPanorama(latlng, showPanoData);
});
myPano = new GStreetviewPanorama(document.getElementById("pano"));
myPano.setLocationAndPOV(fenwayPark, fenwayPOV);
GEvent.addListener(myPano, "error", handleNoFlash);
panoClient.getNearestPanorama(fenwayPark, showPanoData);
}
function showPanoData(panoData) {
if (panoData.code != 200) {
GLog.write('showPanoData: Server rejected with code: ' + panoData.code);
return;
}
nextPanoId = panoData.links[0].panoId;
var displayString = [
"Panorama ID: " + panoData.location.panoId,
"LatLng: " + panoData.location.latlng,
"Copyright: " + panoData.copyright,
"Description: " + panoData.location.description,
"Next Pano ID: " + panoData.links[0].panoId
].join("<br/>");
map.openInfoWindowHtml(panoData.location.latlng, displayString);
GLog.write('Viewer moved to' + panoData.location.latlng);
myPano.setLocationAndPOV(panoData.location.latlng);
}
function next() {
// Get the next panoId
// Note that this is not sophisticated. At the end of the block, it will get stuck
panoClient.getPanoramaById(nextPanoId, showPanoData);
}
function handleNoFlash(errorCode) {
if (errorCode == 603) {
alert("Error: Flash doesn't appear to be supported by your browser");
return;
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border:开发者_JAVA百科 0 none;">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
<div name="pano" id="pano" style="width: 500px; height: 300px"></div>
<input type="button" onclick="next()" value="Next"/>
</body>
</html>
You should have a look at this post.
Google Maps API - Drop a new pin
加载中,请稍侯......
精彩评论