使用jQuery初始化Google地圖

我剛開始使用Google Maps API v3和jQuery。我之前用v2 API製作過地圖，但它沒有使用jQuery。這種方式有望幫助我學習更多的jQuery。我正在關注Google Maps API Tutorial上的示例，並嘗試使用jQuery獲取他們最基本的hello world工作。我也在使用Google Maps API3 Visual Studio Intellisense helper。使用jQuery初始化Google地圖

我的主要頁面如下：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Map Page</title> 
<link href="style/main.css" rel="stylesheet" /> 
<script src="scripts/jquery-1.10.2.js"></script> 
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script src="scripts/google-maps-3-vs-1-0.js"></script> 
<script src="scripts/mdaMap.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     map = new google.maps.Map($("#map-canvas"), startMapOptions); 
    }); 
</script> 
</head> 
<body> 
    <div id="map-canvas" /> 
</body> 
</html>

mdaMap.js包含的以下內容：

/// <reference path="jquery-1.10.2.js" /> 
/// <reference path="google-maps-3-vs-1-0.js" /> 

var map; 
var startMapOptions = new google.maps.MapOptions; 
var startCenterLocation = new google.maps.LatLng(32.912229, -88.692627); 
var startZoomLevel = 7; 
var startMapTypeId = google.maps.MapTypeId.ROADMAP;

我試圖讓這個只有一些基本的jQuery工作到地圖加載到一個特定的元素，而不是使用谷歌的教程代碼google.maps.event.addDomListener(window, 'load', initialize);

它是什麼我失蹤？我的jQuery的知識是有限的，但我認爲我至少知道如何做選擇器和腳本運行時，頁面已準備好$(function() {})'

或者是我的錯誤，認爲地圖可以初始化，而不是上述方式與addDomListener？

來源

2013-11-15 Adam H

你需要一個DOM元素不是一個jQuery對象

<script type="text/javascript"> 
     $(function() { 
     map = new google.maps.Map($("#map-canvas").get(0), startMapOptions); 
     }); 
    </script>

來源

2013-11-15 16:27:46 ilyass

你能幫我明白什麼是選擇做那麼，相比於得到一個DOM元素？我認爲jQuery選擇器會返回DOM元素（但正如我所說我是jQuery新手）。 –

你的回答也讓我更近了一步。現在我的地圖畫布用灰色填充，所以我假設我現在只是使用錯誤的地圖API。但我的問題不是那個，所以我會把你的標記作爲答案。謝謝！ –

@Adam H $（「＃selector」）給你一個jQuery對象。 $（「＃selector」）。get（0）== document.getElementById（「selector」）。你應該在jquery對象上嘗試一個console.log，你會看到背後的神奇;） – ilyass

使用jQuery初始化Google地圖

回答

相關問題