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"/>

Recommended Answers

All 2 Replies

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);

@pritaeas, thanks for your suggestion. happy new year.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.