How to add a Red balloons marker in this google map api?

hi. 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&amp;v=2&amp;sensor=false&amp;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: 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>

youlichika

Light Poster

31 posts since Nov 2010

Reputation Points: 10

Solved Threads: 0

1 Year Ago

This is the js code I use on one of my sites. I'm sure you can put the right stuff in yours.

var _map;
var _marker;
var _mapObject = document.getElementById("googlemap");
var _customIcon;
var gMarkers = [];

function addItem(pLat, pLong, pTitle) {
    if (_mapObject == null)
        return;

    if (_map == null) {
        _map = new GMap2(_mapObject);
        _map.setCenter(new GLatLng(51.175011,6.020207), 8);
        _map.addControl(new GLargeMapControl());
        _map.addControl(new GMapTypeControl());
        _map.addMapType(G_PHYSICAL_MAP);
        _map.setMapType(G_PHYSICAL_MAP);
        _map.checkResize();
    }
    
    if (_customIcon == null) {
	    _customIcon = new GIcon(G_DEFAULT_ICON);
	    _customIcon.image = "/images/flag_icon.png";
	    _customIcon.iconSize = new GSize(16, 16);
	    _customIcon.iconAnchor = new GPoint(3, 15);
	    _customIcon.shadow = null;
	    _customIcon.shadowSize = null;
    }
    
    point = new GLatLng(pLat, pLong);    
    markerOptions = { icon: _customIcon, title: pTitle };
    _marker = new GMarker(point, markerOptions);
    _map.addOverlay(_marker);
    
    gMarkers.push(_marker);
}

pritaeas

Posting Expert

Moderator

5,480 posts since Jul 2006

Reputation Points: 653

Solved Threads: 875