2016-11-03 258 views
0

我试图把标记基于纬度和经度在谷歌地图上存储在我的Db。谷歌地图不显示地图,并不显示标记

但我没有在我的页面上查看地图,也没有标记。

无法弄清楚这里有什么问题。

我有console.log标记&结果是一个对象我不确定它是否应该如此。

@if (item.Longitude != null) 
    { 
     <span class="js-latmaps"> @item.Latitude</span> 
     <span class="js-longmaps"> @item.Longitude</span> 
    } 
    <div id="dvMap" style="width: 500px; height: 500px"> 
</div> 

@section scripts { 
    <script src="http://maps.google.com/maps/api/js?key=<"LONG_NUMBER">libraries = places"></script> 

<script type = "text/javascript"> 

     var markers = [ 
      { 
       "lat": $('.js-latmaps'), 
       "lng": $('.js-longmaps') 
      } 
     ]; 
     console.log(markers); 
     window.onload = function() { 
      var mapOptions = { 
       center: new window.google.maps.LatLng(markers[0].lat, markers[0].lng), 
       zoom: 8, 
       mapTypeId: window.google.maps.MapTypeId.ROADMAP 
      }; 
      var infoWindow = new window.google.maps.InfoWindow(); 
      var map = new window.google.maps.Map(document.getElementById("dvMap"), mapOptions); 
      for (var i = 0; i < markers.length; i++) { 
       var data = markers[i]; 
       var myLatlng = new window.google.maps.LatLng(data.lat, data.lng); 
       var marker = new window.google.maps.Marker({ 
        position: myLatlng, 
        map: map 

       }); 
       (function(marker, data) { 
        window.google.maps.event.addListener(marker, 
         "click", 
         function(e) { 
          infoWindow.setContent(data.description); 
          infoWindow.open(map, marker); 
         }); 
       })(marker, data); 
      } 
     }; 
    </script>} 

https://jsfiddle.net/9z6t2m3q/

+0

你得到什么控制台错误? –

+0

完全没有错误 –

+0

将js小提琴添加到问题中。 –

回答

1

只需更换

<script src="http://maps.google.com/maps/api/js?key=<"LONG_NUMBER">libraries = places"></script> 

通过

<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&libraries=places></script> 

请注意:

  • 要删除<>在你API_KEY
  • 要添加API_KEY之间的&libraries=places
  • 要更换libraries = placeslibraries=places(无空格)
+0

<>仅用于q我的关键看起来像你写的 –

+0

我也叫'maps.googleapis.com'而不是'maps.google.com'。你试过了吗? – AlexB

+0

是的,这没有帮助,如果我手动放置Lat \ Long数据就没有问题。但是当我动态地发送它,然后看着控制台.Log我c这个值在innerHTML“32.0609752” innerText“32.0609752”,所以值是pas –