2015-08-21 116 views
-1

嘿,我正在嘗試使用Google的API創建Google地圖。輸入正確的代碼後,標記不顯示。有人可以幫我找出爲什麼沒有顯示出來嗎?我已經做了一些研究,大部分問題都是由位置問題引起的。我的Google標記未顯示在Google地圖中

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport"></meta> 
<title>Eastern Missouri School District Map - Google Fusion Tables</title> 
<style type="text/css"> 
html, body, #googft-mapCanvas { 
    height: 500px; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 
.controls { 
    margin-top: 10px; 
    border: 1px solid transparent; 
    border-radius: 2px 0 0 2px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    height: 32px; 
    outline: none; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
} 

#pac-input { 
    background-color: #fff; 
    font-family: Roboto; 
    font-size: 15px; 
    font-weight: 300; 
    margin-left: 12px; 
    padding: 0 11px 0 13px; 
    text-overflow: ellipsis; 
    width: 300px; 
} 

#pac-input:focus { 
    border-color: #4d90fe; 
} 

.pac-container { 
    font-family: Roboto; 
} 

#type-selector { 
    color: #fff; 
    background-color: #4d90fe; 
    padding: 5px 11px 0px 11px; 
} 

#type-selector label { 
    font-family: Roboto; 
    font-size: 13px; 
    font-weight: 300; 
} 
</style> 

<input id="pac-input" class="controls" type="text" 
placeholder="Enter your address here"> 
    <div id="googft-mapCanvas"></div> 


<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&amp;v=3"></script> 

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 

<script type="text/javascript"> 

    function initialize() { 
    google.maps.visualRefresh = true; 
    var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) || 
     (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/)); 
    if (isMobile) { 
     var viewport = document.querySelector("meta[name=viewport]"); 
     viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no'); 
    } 

    var mapDiv = document.getElementById('googft-mapCanvas'); 
    mapDiv.style.width = isMobile ? '100%' : '1000px'; 
    mapDiv.style.height = isMobile ? '100%' : '300px'; 
    var map = new google.maps.Map(mapDiv, { 
     center: new google.maps.LatLng(38.64936217820852, -90.53628850000001), 
     zoom: 9, 
     mapTypeId: google.maps.MapTypeId.HYBRID 
    }); 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open')); 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend')); 

    layer = new google.maps.FusionTablesLayer({ 
     map: map, 
     heatmap: { enabled: false }, 
     query: { 
     select: "col26", 
     from: "11Q0B7iRayT2JIOBl8_VRUmitimhX1W01byuFDnAv", 
     where: "" 
     }, 
     options: { 
     styleId: 2, 
     templateId: 2 
     } 
    }); 

    if (isMobile) { 
     var legend = document.getElementById('googft-legend'); 
     var legendOpenButton = document.getElementById('googft-legend-open'); 
     var legendCloseButton = document.getElementById('googft-legend-close'); 
     legend.style.display = 'none'; 
     legendOpenButton.style.display = 'block'; 
     legendCloseButton.style.display = 'block'; 
     legendOpenButton.onclick = function() { 
     legend.style.display = 'block'; 
     legendOpenButton.style.display = 'none'; 
     } 
     legendCloseButton.onclick = function() { 
     legend.style.display = 'none'; 
     legendOpenButton.style.display = 'block'; 
     } 
    } 
    } 


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


    var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input')); 


      var marker = new google.maps.Marker({ 
     position: LatLng(38.64936217820852, -90.53628850000001), 
     map: map, 
     draggable:true, 
     title: "Your New Home", 

    }); 
    marker.setMap(map); 

</script> 
</head> 

<body> 
</body> 
</html> 
+1

你的HTML是無效的。如果我運行你的代碼,我得到一個JavaScript錯誤'未捕獲的ReferenceError:LatLng未定義' – geocodezip

回答

1

你的代碼有一個javascript錯誤:Uncaught ReferenceError: LatLng is not defined。這:

position: LatLng(38.64936217820852, -90.53628850000001), 

應該是:

position: google.maps.LatLng(38.64936217820852, -90.53628850000001), 

其他評論:

  1. 要包括的API的兩倍。不要這樣做,它可能會導致問題,將所有需要的參數合併到一個調用中(v=3&ibraries=places,傳感器參數不再需要)
  2. 您需要在映射初始化的初始化函數中初始化標記
  3. 您需要初始化初始化函數的初始化函數,其中映射被初始化,並在窗口加載事件上運行,以便渲染DOM(document.getElementById('pac-input')直到它已連接到DOM才能找到該元素)。

working fiddle

代碼片段:

function initialize() { 
 
    google.maps.visualRefresh = true; 
 
    var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) || (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/)); 
 
    if (isMobile) { 
 
    var viewport = document.querySelector("meta[name=viewport]"); 
 
    viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no'); 
 
    } 
 

 
    var mapDiv = document.getElementById('googft-mapCanvas'); 
 
    mapDiv.style.width = isMobile ? '100%' : '1000px'; 
 
    mapDiv.style.height = isMobile ? '100%' : '300px'; 
 
    var map = new google.maps.Map(mapDiv, { 
 
    center: new google.maps.LatLng(38.64936217820852, -90.53628850000001), 
 
    zoom: 9, 
 
    mapTypeId: google.maps.MapTypeId.HYBRID 
 
    }); 
 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open')); 
 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend')); 
 

 
    layer = new google.maps.FusionTablesLayer({ 
 
    map: map, 
 
    heatmap: { 
 
     enabled: false 
 
    }, 
 
    query: { 
 
     select: "col26", 
 
     from: "11Q0B7iRayT2JIOBl8_VRUmitimhX1W01byuFDnAv", 
 
     where: "" 
 
    }, 
 
    options: { 
 
     styleId: 2, 
 
     templateId: 2 
 
    } 
 
    }); 
 

 
    if (isMobile) { 
 
    var legend = document.getElementById('googft-legend'); 
 
    var legendOpenButton = document.getElementById('googft-legend-open'); 
 
    var legendCloseButton = document.getElementById('googft-legend-close'); 
 
    legend.style.display = 'none'; 
 
    legendOpenButton.style.display = 'block'; 
 
    legendCloseButton.style.display = 'block'; 
 
    legendOpenButton.onclick = function() { 
 
     legend.style.display = 'block'; 
 
     legendOpenButton.style.display = 'none'; 
 
    } 
 
    legendCloseButton.onclick = function() { 
 
     legend.style.display = 'none'; 
 
     legendOpenButton.style.display = 'block'; 
 
    } 
 
    } 
 
    var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input')); 
 

 

 
    var marker = new google.maps.Marker({ 
 
    position: new google.maps.LatLng(38.64936217820852, -90.53628850000001), 
 
    map: map, 
 
    draggable: true, 
 
    title: "Your New Home", 
 

 
    }); 
 
    marker.setMap(map); 
 
} 
 

 

 
google.maps.event.addDomListener(window, 'load', initialize);
html, 
 
body, 
 
#googft-mapCanvas { 
 
    height: 500px; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 
.controls { 
 
    margin-top: 10px; 
 
    border: 1px solid transparent; 
 
    border-radius: 2px 0 0 2px; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    height: 32px; 
 
    outline: none; 
 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
 
} 
 
#pac-input { 
 
    background-color: #fff; 
 
    font-family: Roboto; 
 
    font-size: 15px; 
 
    font-weight: 300; 
 
    margin-left: 12px; 
 
    padding: 0 11px 0 13px; 
 
    text-overflow: ellipsis; 
 
    width: 300px; 
 
} 
 
#pac-input:focus { 
 
    border-color: #4d90fe; 
 
} 
 
.pac-container { 
 
    font-family: Roboto; 
 
} 
 
#type-selector { 
 
    color: #fff; 
 
    background-color: #4d90fe; 
 
    padding: 5px 11px 0px 11px; 
 
} 
 
#type-selector label { 
 
    font-family: Roboto; 
 
    font-size: 13px; 
 
    font-weight: 300; 
 
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script> 
 
<input id="pac-input" class="controls" type="text" placeholder="Enter your address here"> 
 
<div id="googft-mapCanvas"></div>

+0

我現在試圖讓搜索框起作用。我將這段代碼放在初始化函數中,正如你所建議的那樣,但現在沒有地圖正在渲染。 – user2348902

+0

'//上搜索框 \t google.maps.event.addListener(搜索框, 'places_changed',函數(){ \t \t \t \t //console.log(searchBox.getPlaces())的地方改變事件; \t \t VAR地方= searchBox.getPlaces(); \t \t \t // \t結合 \t \t變種界限=新google.maps.LatLngBounds(); \t \t變種I,地方; \t \t \t \t(i = 0; place = places {i}; i ++){ \t \t \t console.log(place.geometry.location); \t \t \t \t \t \t bounds.extend(place.geometry。位置); \t \t } \t \t \t \t \t map.fitBounds(邊界); \t \t map.setZoom(15)' – user2348902

+0

http://jsfiddle.net/#&togetherjs=UmyAgeyV7C – user2348902