側邊欄谷歌地圖API v3使用PHP/MYSQL拉取數據

Question

我正在嘗試構建一個腳本，它使用php/mysql中的 從數據庫中提取數據。我想創建一個側邊欄與
我的數據庫中的位置。有點像在鏈接的例子下面

http://www.geocodezip.com/v3_MW_example_map15c.html

我能夠在數據拉，並顯示在我的地圖只是 精細的位置......但側邊欄不顯示我的任何標記，我的很確定有一個問題，我的代碼創建標記的一部分..我是新來的JavaScript雖然可能是錯誤的，雖然。代碼的一部分可以在第36行中找到......開始了類似

function createMarker(latlng, name, html) { 

這裏有一個鏈接到我的腳本

http://onlineworkplace.info/googlemaps/testing.php

這裏是實際的腳本。

<script type="text/javascript"> 


var customIcons = { 
    c: { 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
    }, 
    u: { 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
    } 
}; 
    // this variable will collect the html which will eventually be placed in the  select 

    var select_html = ""; 

    // arrays to hold copies of the markers 
    // because the function closure trick doesnt work there 

    var gmarkers = []; 

// global "map" variable 

    var map = null; 

    // A function to create the marker and set up the event window function  i am pretty sure something is not right here 

    function createMarker(latlng, name, html) { 
var ContentString = html; 
var markers = new google.maps.Marker({ 
    position: latlng, 
    map: map, 
    zIndex: Math.round(latlng.lat()*-100000)<<5 
    }); 

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(ContentString); 
    infowindow.open(map,marker); 
    }); 

    // ======= Add the entry to the select box ===== 
    select_html += '<option> ' + name + '<\/option>'; 
    // ========================================================== 

// save the info we need to use later 
gmarkers.push(markers); 
return markers; 
} 



    // ======= This function handles selections from the select box ==== 
    // === If the dummy entry is selected, the info window is closed == 
    function handleSelected(opt) { 
    var i = opt.selectedIndex - 1; 
    if (i > -1) { 
     google.maps.event.trigger(gmarkers[i],"click"); 
    } 
    else { 
     infowindow.close(); 
    } 
    } 

    function load() { 
    var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(29.760, -95.387), 
    zoom: 10, 
    mapTypeId: 'hybrid' 
    }); 
    var infoWindow = new google.maps.InfoWindow; 

    // Change this depending on the name of your PHP file 
    downloadUrl("phpsqlajax_genxml2.php", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("skatespots"); 

    // ==== first part of the select box === 
    select_html = '<select onChange="handleSelected(this)">' + 
        '<option selected> - Select a location - <\/option>'; 

    for (var i = 0; i < markers.length; i++) { 
     var name = markers[i].getAttribute("name"); 
     var address = markers[i].getAttribute("address"); 
     var confirmed = markers[i].getAttribute("confirmed"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<b>" + name + "</b>"; 
     var icon = customIcons[confirmed] || {}; 
// i think the varmarker bit is not right not here not sure though 

     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon.icon, 
     shadow: icon.shadow 
     }); 
     bindInfoWindow(marker, map, infoWindow, html); 
    } 
    // ===== final part of the select box ===== 
    select_html += '<\/select>'; 
    document.getElementById("selection").innerHTML = select_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() {} 



// This Javascript is based on code provided by the 

// Community Church Javascript Team 

// http://www.bisphamchurch.org.uk/ 

// http://econym.org.uk/gmap/ 

// from the v2 tutorial page at: 

// http://econym.org.uk/gmap/basic3.htm 

任何幫助或可能暗示以什麼錯誤，將不勝感激

感謝

Answer 1

這個回答使得通過側邊欄你的意思是選擇組合框

假設原始版本叫做

function createMarker(latlng, name, html) 

它將選項添加到選擇框。

你不再叫createMarker，但不是調用

function bindInfoWindow(marker, map, infoWindow, html) 

只增加了「點擊」監聽器，但沒有做任何其他事情（如添加的選項將select_html變量）。

你可以只修改你的循環：

for (var i = 0; i < markers.length; i++) { 
     var name = markers[i].getAttribute("name"); 
     var address = markers[i].getAttribute("address"); 
     var confirmed = markers[i].getAttribute("confirmed"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<b>" + name + "</b>"; 
     var icon = customIcons[confirmed] || {}; 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon.icon, 
     shadow: icon.shadow 
     }); 
     bindInfoWindow(marker, map, infoWindow, html); 

     // I have been added so I populate the select combo box. 
     select_html += '<option> ' + name + '<\/option>'; 
} 

Answer 2

首先你createMarker（）有矛盾 - 首先它的 '標記'：

var markers = new google.maps.Marker({ 
    position: latlng, 
    map: map, 
    zIndex: Math.round(latlng.lat()*-100000)<<5 // btw do you really need this?? 
}); 

然後 '標記'：

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(ContentString); 
    infowindow.open(map,marker); 
}); 

---

然後，你重新聲明地圖變量load（）函數的作用範圍：

var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(29.760, -95.387), 
    zoom: 10, 
    mapTypeId: 'hybrid' 
}); // creates another variable in local scope 

// instead use global variable, meaning you don't redeclare it (don't use 'var'): 
map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(29.760, -95.387), 
    zoom: 10, 
    mapTypeId: 'hybrid' 
}); // creates another variable in local scope 

---

下一頁：您再次使用不一致的變量信息窗口：

var infoWindow = new google.maps.InfoWindow; // btw this one should be global like map 

// and elsewhere: 
function handleSelected(opt) { 
    var i = opt.selectedIndex - 1; 
    if (i > -1) { 
    google.maps.event.trigger(gmarkers[i],"click"); 
    } 
    else { 
    infowindow.close(); 
    } 
} 

---

最後你循環標誌物與AJAX了並創建標記而不是使用createMarker（）函數，因此請將其替換爲：

// i think the varmarker bit is not right not here not sure though 

    var marker = new google.maps.Marker({ 
    map: map, 
    position: point, 
    icon: icon.icon, 
    shadow: icon.shadow 
    }); 
    bindInfoWindow(marker, map, infoWindow, html); 

有：

createMarker(point, name, html, icon); 

，銳意createMarker定義你想設置圖標：

function createMarker(latlng, name, html, icon) { 
    var ContentString = html; 
    var marker = new google.maps.Marker({ 
    position: latlng, 
    map: map, 
    zIndex: Math.round(latlng.lat()*-100000)<<5, 
    icon: icon.icon, 
    shadow: icon.shadow 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(ContentString); 
    infowindow.open(map,marker); 
    }); 

    // ======= Add the entry to the select box ===== 
    select_html += '<option> ' + name + '</option>'; 
    // ========================================================== 

    // save the info we need to use later 
    gmarkers.push(marker); 
    return marker; 
} 

還宣佈select_html爲全局變量。