2015-11-02 204 views
-1

我有一個谷歌地圖問題而無法加載,我曾嘗試只是爲了建立一個正常的地圖,但沒有什麼工作我得到的是這樣的形象: enter image description here谷歌地圖API V3在地圖

這是我對這個代碼:

(function ($) { 
 
    var marker; 
 
    var map; 
 
    var iconBase = 'https://maps.google.com/mapfiles/ms/icons/'; 
 
    var infowindow; 
 

 
    function initialize() { 
 

 
     getCoordinate(function (location) { 
 
      setUpMap(location.latitude, location.longitude); 
 
     }); 
 

 

 
    } 
 

 
    function setUpMap(lat, long) 
 
    { 
 
     var myLatlng = new google.maps.LatLng(lat, long); 
 
     var mapOptions = { 
 
      zoom: 8, 
 
      center: myLatlng, 
 
      mapTypeControl: false, 
 
      streetViewControl: false, 
 
      mapTypeId:google.maps.MapTypeId.ROADMAP 
 
     }; 
 

 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
     codeAddress(); 
 
    } 
 
    function codeAddress() 
 
    { 
 
     //Resellers is a global varaible that holds all the resellers addresses 
 
     Object.keys(resellers).forEach(function(key){ 
 
      var reseller = resellers[key]; 
 
      marker = new google.maps.Marker({ 
 
       map: map, 
 
       position: new google.maps.LatLng(reseller.lat, reseller.lng), 
 
       icon: iconBase + 'green-dot.png' 
 
      }); 
 
      (function (marker) { 
 
       // add click event 
 
       google.maps.event.addListener(marker, 'click', function() { 
 
        if (infowindow) { 
 
         infowindow.close(); 
 
        } 
 
        infowindow = new google.maps.InfoWindow({ 
 
         title: key, 
 
         content: '<div style="color: black; height: 150px;">' + reseller.address + '</div>' 
 
        }); 
 
        infowindow.open(map, marker); 
 
       }); 
 
      })(marker); 
 
      gmaerksp.push(marker); 
 
     }); 
 
    } 
 

 

 

 
    function getCoordinate(callback) { 
 
     navigator.geolocation.getCurrentPosition(
 
      function (position) { 
 
       var returnValue = { 
 
        latitude: position.coords.latitude, 
 
        longitude: position.coords.longitude 
 
       }; 
 
       var location = returnValue; 
 
       
 

 
       callback(location); 
 
      } 
 
     ); 
 
    } 
 
    google.maps.event.addDomListener(window, 'load', initialize); 
 

 
}(jQuery));
#map-canvas{ 
 
    width: 1200px; 
 
    height: 600px; 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script>

而且我不知道爲什麼地圖上沒有加載,標記加載,因爲它應該。但正如你所看到的,縮放工具也沒有正確加載。所以你們有什麼想法是錯的?我已經測試了更改div大小,但它仍然加載相同。

+2

似乎[工作](http://jsfiddle.net/tive/vs8cnvv6/)對我來說,但我們錯過了'經銷商'對象,所以沒有標記。 –

+0

如果用戶禁用了地理位置,它會慘敗。 – geocodezip

+0

我知道它會失敗,我沒有建立在這個檢查,並沒有建立在默認位置。 但我開始弄清楚這一點,我認爲這是我在調用這個文件的方式有問題,現在我在wordpress中用簡碼運行這個文件。所以我會嘗試一些其他不同的方式來看看是否有任何改變 – zarex360

回答

0

經過多次調試後,我找到了答案!看起來像谷歌地圖不能插入wordpress短代碼。我不知道爲什麼,但只要我將它移到自己的模板上,它就像魅力一樣。

因此,如果任何其他人有相同的問題,並在那裏把谷歌地圖在短代碼中,嘗試從那裏移出它,看看它是否工作。