Google Maps API（v3）添加/更新標記

Question

編輯︰它現在可以工作，但不會加載如果用戶不允許或具有基於位置的服務。查看jsfiddle示例的已接受答案評論。

我已經看過了幾個教程和問題，但我無法安靜地瞭解發生了什麼（或在這種情況下，沒有發生）。當用戶點擊鏈接時，我正在加載我的地​​圖。這會將用戶當前位置放置在中心的地圖以及用戶位置的標記。但是，if (navigation.location)之外的任何標記似乎都不會加載。以下是我當前的代碼：

function initialize() { 
     // Check if user support geo-location 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
       var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
       var userLat = position.coords.latitude; 
       var userLong = position.coords.longitude; 
       var mapOptions = { 
        zoom: 8, 
        center: point, 
        mapTypeId: google.maps.MapTypeId.HYBRID 
       } 

      // Initialize the Google Maps API v3 
      var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

      // Place a marker 
      new google.maps.Marker({ 
       position: point, 
       map: map, 
       title: 'Your GPS Location' 
      }); 
     }); 
    } else { 
     var userLat = 53; 
     var userLong = 0; 
     var mapOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(userLat, userLong), 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     } 
     // Place a marker 
     new google.maps.Marker({ 
      position: point, 
      map: map, 
      title: 'Default Location' 
     }); 
     // Initialize the Google Maps API v3 
     var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
    } 
    <? 
    for ($i = 0; $i < sizeof($userLocations); $i++) { 
     ?> 
     var userLatLong = new google.maps.LatLng(<? echo $userLocations[$i]['lat']; ?>, <? echo $userLocations[$i]['long']; ?>); 
     new google.maps.Marker({ 
      position: userLatLong, 
      map: map, 
      title:"<? echo $userLocations[$i]['displayName'] . ', ' . $userLocations[$i]['usertype']; ?>" 
     }); 
     <? 
    } 
    ?> 
} 

function loadMapScript() { 
    if (typeof(loaded) == "undefined") { 
     $("#showMap").css("display", "none"); 
     $("#showMapLink").removeAttr("href"); 
     $("#map").css("height", "600px"); 
     $("#map").css("width", "600px"); 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=true&callback=initialize"; 
     document.body.appendChild(script); 
     loaded = true; 
    } else { 
     alert("Map already loaded!"); 
    } 
} 

loadMapScript（）在用戶單擊鏈接時調用。 php for循環通過預先創建的數組與所有信息進行循環。
我猜我不完全理解，因爲當如果我把：

var userLatLong = new google.maps.LatLng(53, 0); 
      new google.maps.Marker({ 
       position: userLatLong, 
       map: map, 
       title:"Title" 
      }); 

到控制檯（谷歌瀏覽器），我得到的錯誤：

Error: Invalid value for property <map>: [object HTMLDivElement] 

我不噸，但是，否則會得到任何錯誤。任何幫助將非常感激！ :)

Answer 1

navigator.geolocation.getCurrentPosition()是異步的。

重新組織你的代碼是這樣的：

var mapOptions = { 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
} 

function initialize() { 
    // Check if user support geo-location 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
      makeMap(position.coords.latitude, position.coords.longitude, 'Your GPS Location'); 
     }); 
    } else { 
     makeMap(53, 0, 'DefaultLocation'); 
    } 
} 

function makeMap(lat, lng, text) { 
    var point = new google.maps.LatLng(lat, lng); 
    mapOptions.center = point; 
    map = new google.maps.Map(document.getElementById("map"), mapOptions); 
    new google.maps.Marker({ 
     position: point, 
     map: map, 
     title: text 
    }); 
    <?php for ($i = 0; $i < sizeof($userLocations); $i++): ?> 
    var userLatLong = new google.maps.LatLng(<? echo $userLocations[$i]['lat']; ?>, <? echo $userLocations[$i]['long']; ?>); 
    new google.maps.Marker({ 
     position: userLatLong, 
     map: map, 
     title:"<? echo $userLocations[$i]['displayName'] . ', ' . $userLocations[$i]['usertype']; ?>" 
    }); 
    <?php endforeach ?> 
} 

另外，還要考慮Bootstrap逼近$ userLocations成JavaScript變量是這樣的：

var userLocations = <?php print json_encode($userLocations) ?>; 

然後執行你的JavaScript中循環，而不是混合語言。

Answer 2

變化：

var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

要：

map = new google.maps.Map(document.getElementById("map"), mapOptions); 

因爲var，地圖變量綁initialize()的範圍。刪除它會將其設置爲全局地圖變量（或window.map），使其在initialize()函數之外可用。

發生了什麼事你有一個HTML元素<div id="map">。在許多瀏覽器中，全局變量是從html元素ID創建的，因此map等於document.getElementById('map')。

---

編輯：其實，這只是說明了在Chrome控制檯您的問題。在嘗試將標記附加到標記之前，您需要設置map，正如您在if (navigator.geolocation) {}中所做的那樣。這也解釋了爲什麼沒有放置用戶位置標記。放置它們的代碼在initialize()之前運行。將此代碼放在initialize或其自己的函數內，並從initialize調用該函數。

Answer 3

它看起來像你正在創造的標記，但沒有做任何事情。嘗試改變你的新標記看起來像這樣：

var marker = new google.maps.Marker({ 
       position: point, // this won't actually work - point is out of scope 
       title: 'Your GPS Location' 
      }); 

marker.setMap(map); 

編輯：確保點位於地圖內！

var bounds = new google.maps.LatLngBounds(); 
bounds.extend(point); 
map.fitBounds(bounds); 

Answer 4

你試過：

var map = null; 
function initialize() { ... } 

，然後改變裏面的代碼：

map = new google.maps.Map(...); //make this the first line 
if (navigator.geolocation) { 
    // Change the code from: 
    var map ... 
    // to: 
    map ... 

你剛纔引用的直接映射（不var）其他地方，所以應該工作。