使用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地图

回答

相关问题