-5

我所需要的只是学习如何向这个谷歌地图/网页添加更多地址。

这个页面在我之前几年就已经到位并由其他人设计。更糟糕的是，该站点使用 CodeIgnigter（我不知道如何使用它）

我不需要重新设计或任何东西。我只需要知道如何添加更多地址。

PHP代码/codeigniter

<? $this->load->view("inc/header");
?>
  <script src="http://maps.google.com/maps?file=api&v=2&key=removed" 

  type="text/javascript"></script>

  <script type="text/javascript">

//<![CDATA[
var cm_map;
var cm_mapMarkers = [];
var cm_mapHTMLS = [];

// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var cm_baseIcon = new GIcon();
cm_baseIcon.shadow = "http://www.google.com/mapfiles/shdow50.png";
cm_baseIcon.iconSize = new GSize(20, 34);
cm_baseIcon.shadowSize = new GSize(37, 34);
cm_baseIcon.iconAnchor = new GPoint(9, 34);
cm_baseIcon.infoWindowAnchor = new GPoint(9, 2);
cm_baseIcon.infoShadowAnchor = new GPoint(18, 25);

// Change these parameters to customize map
var param_wsId = "od6";
var param_ssKey = "removed";
var param_useSidebar = true;
var param_titleColumn = "address";
var param_descriptionColumn = "link";
var param_latColumn = "latitude";
var param_lngColumn = "longitude";
var param_rankColumn = "";
var param_iconType = "red";
var param_iconOverType = "green";

/**
 * Loads map and calls function to load in worksheet data.
 */
function cm_load() {  
  if (GBrowserIsCompatible()) {
    // create the map
    cm_map = new GMap2(document.getElementById("cm_map"));
    cm_map.addControl(new GLargeMapControl());
    cm_map.addControl(new GMapTypeControl());
    cm_map.setCenter(new GLatLng( 43.907787,-79.359741), 2);
    cm_getJSON();
  } else {
    alert("Sorry, the Google Maps API is not compatible with this browser");
  } 
}

/**
 * Function called when marker on the map is clicked.
 * Opens an info window (bubble) above the marker.
 * @param {Number} markerNum Number of marker in global array
 */
function cm_markerClicked(markerNum) {
  cm_mapMarkers[markerNum].openInfoWindowHtml(cm_mapHTMLS[markerNum]);
}

/**
 * Function that sorts 2 worksheet rows from JSON feed
 * based on their rank column. Only called if column is defined.
 * @param {rowA} Object Represents row in JSON feed
 * @param {rowB} Object Represents row in JSON feed
 * @return {Number} Difference between row values
 */
function cm_sortRows(rowA, rowB) {
  var rowAValue = parseFloat(rowA["gsx$" + param_rankColumn].$t);
  var rowBValue = parseFloat(rowB["gsx$" + param_rankColumn].$t);

  return rowAValue - rowBValue;
}

/** 
 * Called when JSON is loaded. Creates sidebar if param_sideBar is true.
 * Sorts rows if param_rankColumn is valid column. Iterates through worksheet rows, 
 * creating marker and sidebar entries for each row.
 * @param {JSON} json Worksheet feed
 */       
function cm_loadMapJSON(json) {
  var usingRank = false;

  if(param_useSidebar == true) {
    var sidebarTD = document.createElement("td");
    sidebarTD.setAttribute("width","150");
    sidebarTD.setAttribute("valign","top");
    var sidebarDIV = document.createElement("div");
    sidebarDIV.id = "cm_sidebarDIV";
    sidebarDIV.style.overflow = "auto";
    sidebarDIV.style.height = "860px";
    sidebarDIV.style.fontSize = "11px";
    sidebarDIV.style.color = "#000000";
    sidebarTD.appendChild(sidebarDIV);
    document.getElementById("cm_mapTR").appendChild(sidebarTD);
  }

  var bounds = new GLatLngBounds();   

  if(json.feed.entry[0]["gsx$" + param_rankColumn]) {
    usingRank = true;
    json.feed.entry.sort(cm_sortRows);
  }
  for (var i = 0; i < <?=count($address)+1?>; i++) {
    var entry = json.feed.entry[i];

    if(entry["gsx$" + param_latColumn]) {
      var lat = parseFloat(entry["gsx$" + param_latColumn].$t);
      var lng = parseFloat(entry["gsx$" + param_lngColumn].$t);
      var point = new GLatLng(lat,lng);
      var html = "<div style='font-size:12px'>";
      html += "<strong>" + entry["gsx$"+param_titleColumn].$t 
              + "</strong>";
      var label = entry["gsx$"+param_titleColumn].$t;
      var rank = 0;
      if(usingRank && entry["gsx$" + param_rankColumn]) {
        rank = parseInt(entry["gsx$"+param_rankColumn].$t);
      }
        var trimmed = label.replace(/^\s+|\s+$/g, '') ;
        var link_label = label.replace(/ /gi,'-');
        link_label = link_label.toLowerCase();
        link_label = link_label.replace(/^\s+|\s+$/g, '') ;

if(trimmed == "1286 West Adams Blvd" )
{
     if(entry["gsx$" + param_descriptionColumn]) {
    html += "<br/><a href=\"<?=base_url()?>Housing/propertyDetail/1286-west-adams-blvd.html\">Click here for housing option</a>" ;
    }

}
else if(trimmed == "1239 West 30th Street")
{
    if(entry["gsx$" + param_descriptionColumn]) {
    html += "<br/><a href=\"<?=base_url()?>Housing/propertyDetail/1352-west-29th-street.html\">Click here for housing option</a>" ;
    }
}

else if(trimmed == "2150 Oak Street")
{
    if(entry["gsx$" + param_descriptionColumn]) {
    html += "<br/><a href=\"<?=base_url()?>Housing/propertyDetail/2126-50-south-oak-867-889-west-23rd-street.html\">Click here for housing option</a>" ;
    }
}
else if(trimmed == "1146 West 36th Place")
{
    if(entry["gsx$" + param_descriptionColumn]) {
    html += "<br/><a href=\"<?=base_url()?>Housing/propertyDetail/1140--1168-west-36th-place.html\">Click here for housing option</a>" ;
    }
}else if(trimmed == "1199 West 37th Drive")
{
    if(entry["gsx$" + param_descriptionColumn]) {
    html += "<br/><a href=\"<?=base_url()?>Housing/propertyDetail/1189--1199-west-37th-drive.html\">Click here for housing option</a>" ;
    }
}
else if(trimmed == "2611 South Portland Street")
{
    if(entry["gsx$" + param_descriptionColumn]) {
    html += "<br/><a href=\"<?=base_url()?>Housing/propertyDetail/2611-south-portland.html\">Click here for housing option</a>" ;
    }
}

else
{
    if(entry["gsx$" + param_descriptionColumn]) {

        html += "<br/><a href=\"<?=base_url()?>Housing/propertyDetail/"+link_label+".html\">Click here for housing option</a>" ;
           }

}



      html += "</div>";



      // create the marker

      var marker = cm_createMarker(point,label,html,rank);
      //label = 'hello';
      cm_map.addOverlay(marker);

      cm_mapMarkers.push(marker);

      cm_mapHTMLS.push(html);

      bounds.extend(point);



      if(param_useSidebar == true) {

        var markerA = document.createElement("a");

        markerA.setAttribute("href","javascript:cm_markerClicked('" + i +"')");

        markerA.style.color = "#000000";

        var sidebarText= "";

        if(usingRank) {

          sidebarText += rank + ") ";

        } 

        sidebarText += label;

        markerA.appendChild(document.createTextNode(sidebarText));

        // condition to remove an address from the list....
        /*if(trimmed != '1155 24th Street')
        {*/
            sidebarDIV.appendChild(markerA);

            sidebarDIV.appendChild(document.createElement("br"));

            sidebarDIV.appendChild(document.createElement("br"));
        //}



      } 

    }

  }



  cm_map.setZoom(cm_map.getBoundsZoomLevel(bounds));

  cm_map.setCenter(bounds.getCenter());

}



/**

 * Creates marker with ranked Icon or blank icon,

 * depending if rank is defined. Assigns onclick function.

 * @param {GLatLng} point Point to create marker at

 * @param {String} title Tooltip title to display for marker

 * @param {String} html HTML to display in InfoWindow

 * @param {Number} rank Number rank of marker, used in creating icon

 * @return {GMarker} Marker created

 */

function cm_createMarker(point, title, html, rank) {

  var markerOpts = {};

  var nIcon = new GIcon(cm_baseIcon);



  if(rank > 0 && rank < 100) {

    nIcon.imageOut = "http://gmaps-samples.googlecode.com/svn/trunk/" +

        "markers/" + param_iconType + "/marker" + rank + ".png";

    nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/" +

        "markers/" + param_iconOverType + "/marker" + rank + ".png";

    nIcon.image = nIcon.imageOut; 

  } else { 

    nIcon.imageOut = "http://gmaps-samples.googlecode.com/svn/trunk/" +

        "markers/" + param_iconType + "/blank.png";

    nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/" +

        "markers/" + param_iconOverType + "/blank.png";

    nIcon.image = nIcon.imageOut;

  }



  markerOpts.icon = nIcon;

  markerOpts.title = title;      

  var marker = new GMarker(point, markerOpts);



  GEvent.addListener(marker, "click", function() {

    marker.openInfoWindowHtml(html);

  });

  GEvent.addListener(marker, "mouseover", function() {

    marker.setImage(marker.getIcon().imageOver);

  });

  GEvent.addListener(marker, "mouseout", function() {

    marker.setImage(marker.getIcon().imageOut);

  });

  GEvent.addListener(marker, "infowindowopen", function() {

    marker.setImage(marker.getIcon().imageOver);

  });

  GEvent.addListener(marker, "infowindowclose", function() {

    marker.setImage(marker.getIcon().imageOut);

  });

  return marker;

}



/**

 * Creates a script tag in the page that loads in the 

 * JSON feed for the specified key/ID. 

 * Once loaded, it calls cm_loadMapJSON.

 */

function cm_getJSON() {



  // Retrieve the JSON feed.

  var script = document.createElement('script');

  script.setAttribute('src', 'http://spreadsheets.google.com/feeds/list'

                         + '/' + param_ssKey + '/' + param_wsId + '/public/values' +

                        '?alt=json-in-script&callback=cm_loadMapJSON');

  script.setAttribute('id', 'jsonScript');

  script.setAttribute('type', 'text/javascript');

  document.documentElement.firstChild.appendChild(script);
}



setTimeout('cm_load()', 500); 



//]]>



</script>
<body onLoad="FP_preloadImgs(/*url*/'button18.jpg', /*url*/'button19.jpg'); if (document.getElementById('zoom_searchbox')) {document.getElementById('zoom_searchbox').focus();}" bgcolor=#969696>
<div id="junaid"></div>
<div class="body_main">

<div class="banner_contianer">
                <div class="banner_bg"><img src="<?=base_url()?>banners/properties.png" alt="" /></div>
                <div class="banner_btm_flear"></div></div>


                <div class="body_left_cont">
                    <div class="welcome_message">
                        <h1><?=$page_data['heading']?></h1>
                  </div>
                        <div class="tabs_main_cont" >
                <div class="tabs_md_show"><img src="<?=base_url()?>images/search-top-bg.png" alt="" /></div>
                    <div class="tabs_data_cont">
                            <div class="tabs_repeat_inner">
                                <div class="show_detail_contianer">
                                    <div class="show_In_cont">
                                    <div class="show_In_properties">
                                        <table bgcolor="#FFFFFF" id="cm_mapTABLE"> 

      <tbody> <tr id="cm_mapTR">



          <td> <div id="cm_map" style="width:530px; height:860px"></div> </td>

      </tr> </tbody>

    </table>
                                       </div> 
                                    </div>
                                </div>
                            </div>
                           <div class="tabs_md_show"><img src="<?=base_url()?>images/search-btm-bg.png" alt="" /></div>           
              </div>

                    </div>

                        </div>

                </body>

                        <?PHP
//$this->load->view("inc/right_panel");
?>

                            <div class="opportunities">We Do Business In Accordance With The Federal Fair Housing Law Equal Housing Opportunity</div>
                </div>

        <?PHP
$this->load->view("inc/footer");
?>
4

1 回答 1

2

这很简单。一变：

  1. 修改电子表格

此电子表格包含所有地址描述和坐标。您可能需要向作者请求访问权限。

添加新条目后 - 确保提要包含新条目

仅供参考 Feed url

电子表格键是

t63uNv1JYAjjbdSo2NVr0ew

它会自动被代码拾取，只需刷新一个页面。

于 2012-04-19T19:49:33.680 回答