Javascript GoogleMapsAPI：如何将源代码从GoogleSpreadsheet API替换为MySQL/PHP？
我对谷歌地图一无所知，我被要求更新地图的来源 我需要替换当前源（无法访问此Google电子表格API帐户）。 正如我所解释的，我没有接受过谷歌地图的培训。但是，我认为要替换当前的源代码，创建一个mysql/php数组或其他东西将很容易。然而，我不知道如何为谷歌地图做到这一点 以下是谷歌地图的代码：Javascript GoogleMapsAPI：如何将源代码从GoogleSpreadsheet API替换为MySQL/PHP？,javascript,php,mysql,google-maps,Javascript,Php,Mysql,Google Maps,我对谷歌地图一无所知，我被要求更新地图的来源 我需要替换当前源（无法访问此Google电子表格API帐户）。 正如我所解释的，我没有接受过谷歌地图的培训。但是，我认为要替换当前的源代码，创建一个mysql/php数组或其他东西将很容易。然而，我不知道如何为谷歌地图做到这一点 以下是谷歌地图的代码： <? $this->load->view("inc/header"); ?> <script src="http://maps.google.com/maps?fil
<? $this->load->view("inc/header");
?>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAALG0LY9VczfCgBGR3gYl-OhSYZ3oXbzqsmNbiZCTxCau3LOQmUxTyi2riEMwN4Qit7X7U2xmd_NND1w"
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 = "t63uNv1JYAjjbdSo2NVr0ew";
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");
?>
//; （i++）{
var entry=json.feed.entry[i]；
如果（条目[“gsx$”+参数列]）{
var lat=parseFloat（条目[“gsx$”+参数latColumn]。$t）；
var lng=parseFloat（条目[“gsx$”+参数列]。$t）；
var点=新玻璃（lat，lng）；
var html=“”；
html+=“”+条目[“gsx$”+参数标题列]。$t
+“”；
var标签=条目[“gsx$”+参数标题列]。$t；
var秩=0；
如果（使用秩和条目[“gsx$”+参数列]）{
秩=parseInt（条目[“gsx$”+参数列]。$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'）；
如果（修剪==“西亚当斯大道1286号”）
{
if（条目[“gsx$”+参数描述列]）{
html+=“
”；
}
}
否则，如果（修剪==“1239西30街”）
{
if（条目[“gsx$”+参数描述列]）{
html+=“
”；
}
}
否则（修剪==“2150橡树街”）
{
if（条目[“gsx$”+参数描述列]）{
html+=“
”；
}
}
否则如果（修剪=“1146西36位”）
{
if（条目[“gsx$”+参数描述列]）{
html+=“
”；
}
}否则如果（修剪==“1199西37车道”）
{
if（条目[“gsx$”+参数描述列]）{
html+=“
”；
}
}
否则，如果（修剪==“2611南波特兰街”）
{
if（条目[“gsx$”+参数描述列]）{
html+=“
”；
}
}
其他的
{
if（条目[“gsx$”+参数描述列]）{
html+=“
”；
}
}
html+=“”；
//创建标记
var marker=cm_createMarker（点、标签、html、等级）；
//label='hello'；
cm_地图添加覆盖（标记）；
cm_地图标记。推（标记）；
cm_mapHTMLS.push（html）；
扩展（点）；
if（param_useSidebar==true）{
var markerA=document.createElement（“a”）；
setAttribute（“href”，“javascript:cm_markerClicked（“+i+”）”）；
markerA.style.color=“#000000”；
var sidebarText=“”；
如果（使用秩）{
sidebarText+=排名+”；
}
sidebarText+=标签；
appendChild（document.createTextNode（sidebarText））；
//从列表中删除地址的条件。。。。
/*如果（修剪！=“1155 24街”）
{*/
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（））；
}
/**
*创建带有排名图标或空白图标的标记，
*取决于是否定义了秩。分配onclick函数。
*@param{GLatLng}点在上创建标记的点
*@param{String}title要为标记显示的工具提示标题
*@param{String}要在信息窗口中显示的html
*@param{Number}rank标记的编号rank，用于创建图标
*@return{GMarker}标记已创建
*/
函数cm_createMarker（点、标题、html、排名）{
var markerOpts={}；
var nIcon=新的GIcon（cm_baseIcon）；
如果（秩>0&&秩<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；
}否则{
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=标题；
var标记=新的GMarker（点，标记点）；
addListener（标记“单击”，函数（）{
marker.openInfoWindowHtml（html）；
});
addListener（标记“mouseover”，函数（）{
marker.setImage（marker.getIcon（）.imageOver）；
});
addListener（标记“mouseout”，函数（）{
marker.setImage（marker.getIcon（）.imageOut）；
});
addListener（标记“infowindowopen”，函数（）{
marker.setImage（marker.getIcon（）.imageOver）；
});
addListener（标记“infowindowclose”，函数（）{
marker.setImage（marker.getIcon（）.imageOut）；
});
返回标记；
}
/**
*在页面中创建一个脚本标记，在
*指定键/ID的JSON提要。
*加载后，它将调用cm_loadMapJSON。
*/
函数cm_getJSON（）{
//检索JSON提要。
var script=document.createElement（'script'）；
script.setAttribute（'src'，'http://spreadsheets.google.com/feeds/list'
+“/”+param_ssKey+“/”+param_wsId+“/public/values”+
“？脚本中的alt=json&callback=cm_loadMapJSON”）；
setAttribute（'id'，'jsonScript'）；
setAttribute（'type'，'text/javascript'）；
document.documentElement.firstChild.appendChild（脚本）；
}
setTimeout（'cm_load（）'，500）；
//]]>
横幅/属性.png“alt=”“/>
图像/搜索顶部bg.png“alt=”“/>
<?php
include('database.php');
while($data = mysql_fetch_array($DATABASE))
{
$map_source['address'] = data['address'];
$map_source['lat'] = data['long'];
$map_source['long'] = data['lat'];
}
mysql_close($con);
?>
<?php
require("database.php");
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
// Opens a connection to a MySQL server
$connection=mysql_connect ($localhost, $username, $password);
if (!$connection) {
die('Not connected : ' . mysql_error());
}
// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
// Select all the rows in the tbl_address table
$query = "SELECT * FROM tbl_address WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'name="' . parseToXML($row['g_address']) . '" ';
echo 'address="' . parseToXML($row['g_address']) . '" ';
echo 'lat="' . $row['g_latitude'] . '" ';
echo 'lng="' . $row['g_longitude'] . '" ';
echo 'type="USC Student Housing" ';
echo '/>';
}
// End XML file
echo '</markers>';
?>
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("http://firstchoicehousing.com/_api/google/maps/phpsqlajax_genxml2.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[[]i].getAttribute("name");
var address = markers[[]i].getAttribute("address");
var type = markers[[]i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[[]i].getAttribute("lat")),
parseFloat(markers[[]i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[[]type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>**