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">
        <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);
          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
          map.openInfoWindowHtml(panoData.location.latlng, displayString);
          GLog.write('Viewer moved to' + 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");
      <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"/>
6 Years
Discussion Span
Last Post by youlichika

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)

    if (_map == null) {
        _map = new GMap2(_mapObject);
        _map.setCenter(new GLatLng(51.175011,6.020207), 8);
        _map.addControl(new GLargeMapControl());
        _map.addControl(new GMapTypeControl());
    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);
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.