Google Maps API：ソースをGoogle Spreadsheet APIからMySQL/PHPに置き換える方法は？

は、私はGoogleマップについては何も> _ <を知らない、と私は私が電流源（このGoogleスプレッドシートのAPIアカウントへのアクセスが失われる）を交換する必要がthis page Google Maps API：ソースをGoogle Spreadsheet APIからMySQL/PHPに置き換える方法は？

のソースを更新するように頼まれました。

私が説明したように、私はGoogleマップを訓練していません。しかし、私は現在のソースを置き換えるために、mysql/php配列などを作成するのは簡単だろうと考えています。しかし、私はGoogleマップのためにそれを行う方法を知らない。

<? $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は、MySQL/PHPの配列を持っている場合は、どのように私は配列をエコーするにはどうすればよいのソース？：

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

を交換します：ここで

は、Googleマップのコードですソースを置き換えるには？

EDIT：2012年4月19日4時30 pm** 提供チュートリアル@のマノ・マークを通過した後、私は一緒にほとんどすべてを取得することができました。しかし、this test page）は何も表示していません。何が間違っているのか理解してもらえますか？

PHP/XML：

<?php 
require("database.php"); 

function parseToXML($htmlStr) 
{ 
$xmlStr=str_replace('<','&lt;',$htmlStr); 
$xmlStr=str_replace('>','&gt;',$xmlStr); 
$xmlStr=str_replace('"','&quot;',$xmlStr); 
$xmlStr=str_replace("'",'&#39;',$xmlStr); 
$xmlStr=str_replace("&",'&amp;',$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>'; 

?>

HTML MAP：

<!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>**

出典

2012-04-19 Omar

ただ、どこか別の場所からデータを取得するために 'cm_getJSON'を書き換えます。私たちはあなたのコードを書くつもりはなく、あなたの問題は実際にはGoogle Maps APIとほとんど関係ありません。 – ceejayoz

初心者として、私は習得の縁石です。これは、私が頼りにしていて、困っているときに私の行く場所になったコミュニティです。コミュニティとして、他の人を助けるために人々の善意に基づいています。私がベテランになったら（私が願っていれば）、私は恩返ししてできる限り手伝ってくれるでしょう。 – Omar

あなたはまだあなた自身で何かをしなければならないでしょう。これは「私にコードを渡す」タイプのサイトではありません。それは "私はXをやろうとしたが、私は特定の問題Y"のサイトに出会った。 – ceejayoz

ですから、あなたがグーグルのバージョン2を使用していることであるあなたが認識していないなら、別の問題を、持っていますMaps APIは廃止され、来年は閉鎖される可能性があります。バージョン3は現在のバージョンです。 Google MapsのAPIを使い始めるためにPHP/MySQLを使用してGoogle MapsのAPIを開発者サイト上の記事のカップルがあります： https://developers.google.com/maps/articles/phpsqlajax_v3 https://developers.google.com/maps/articles/phpsqlsearch_v3

出典

2012-04-19 21:22:24

Google Maps API：ソースをGoogle Spreadsheet APIからMySQL/PHPに置き換える方法は？

答えて

関連する問題