我所需要的只是学习如何向这个谷歌地图/网页添加更多地址。
这个页面在我之前几年就已经到位并由其他人设计。更糟糕的是，该站点使用 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");
?>