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）其他地方，所以应该工作。