Tag: 谷歌 MAPS API 3

由jQuery添加的div上的Google Maps addDomListener只能看到循环的最后一次迭代

我有以下简单的脚本： var fruits = new Array(“apple”,”orange”,”lemon”); $(“#fruit_canvas”).append(“Mouse over these fruits:”); for(var i = 0; i < fruits.length; i++) { var fruit = fruits[i]; var html = "” + fruit + “”; var fruitdiv = $(html); $(“#fruit_canvas”).append(fruitdiv); google.maps.event.addDomListener($(fruitdiv)[0], ‘mouseover’, function() { $(“#result_canvas”).append(“Mouse over ” + fruit); }); google.maps.event.addDomListener($(fruitdiv)[0], ‘mouseout’, function() { $(“#result_canvas”).empty(); }); } 它遍历一个简单的数组，使用jQuery从每个元素中创建一个div，并将它附加到另一个div。 然后将Google […]

如何使用jQuery隐藏Google Maps Api Markers

您好，这可能是一个非常愚蠢的问题，但我想在点击它们时使标记消失。 标记位于地图上，但是当我点击它时，它没有做任何事情。 我想知道它为什么不起作用。 谢谢！ $(document).ready(function(){ var myOptions = { center: new google.maps.LatLng(40.1, -88.2), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions); var myLatlng = new google.maps.LatLng(40.1, -88.2); var temp_marker = new google.maps.Marker({ position: myLatlng, map: map, title:”Hello World!” }); console.log($(temp_marker)); console.log(temp_marker); //temp_marker.click(function(){$(this).hide();}); $(temp_marker).click(function(){console.log(“click is working”); $(this).hide();}); });

谷歌地图（V3） – 地图容器选择器（使用jquery）

我正在尝试解决谷歌地图中的棘手问题（api V3） 很好地工作： var map = new google.maps.Map(document.getElementById(“map_container”), myOptions); 如果我尝试使用jQuery选择器，则不起作用 var map = new google.maps.Map($(‘#map_container’), myOptions); 我做了这个例子 先感谢您 干杯 佩德罗

使用jQuery在Google地图上的两点之间划一条线？

如何使用jQuery或Javascript在Google地图API中绘制两点（纬度和经度）之间的线？ 我需要两点之间的最短路径。 它可以是任何类型的线。

Google API多种标记，具有不同的颜色，具体取决于类

所以我在下面的代码标记是由使用邮政编码和城市的CMS系统创建的。 一切正常，但我想要做的是改变每个引脚的颜色，这取决于我有3类红色，绿色和蓝色这个标记应该根据CMS系统中选择的类来改变。 实现这一目标的最佳方式是什么？ $(document).ready(function () { var map; var elevator; var myOptions = { zoom: 3, center: new google.maps.LatLng(50, -30), mapTypeId: ‘terrain’ }; map = new google.maps.Map($(‘#map_canvas’)[0], myOptions); var styles = [{“featureType”:”water”,”stylers”:[{“color”:”#46bcec”},{“visibility”:”on”}]},{“featureType”:”landscape”,”stylers”:[{“color”:”#f2f2f2″}]},{“featureType”:”road”,”stylers”:[{“saturation”:-100},{“lightness”:45}]},{“featureType”:”road.highway”,”stylers”:[{“visibility”:”simplified”}]},{“featureType”:”road.arterial”,”elementType”:”labels.icon”,”stylers”:[{“visibility”:”off”}]},{“featureType”:”administrative”,”elementType”:”labels.text.fill”,”stylers”:[{“color”:”#444444″}]},{“featureType”:”transit”,”stylers”:[{“visibility”:”off”}]},{“featureType”:”poi”,”stylers”:[{“visibility”:”off”}]}]; map.setOptions({styles: styles}); var iterator = 0; var addresses = [ [‘New York’, ‘ 10007’], [‘Mexico’, ‘ 10100’], [‘Spain’, ‘ 04830’], ]; for (var […]

谷歌地图API v3从XML中删除延迟标记？

我正在使用Google Maps api（v3）和jQuery显示几批标记。 我的工作几乎与我想要的一样，但是我需要逐个放下标记而不是一次放下标记。 我在Google地图文档中找到了这个例子 ，但我无法弄清楚如何将它与我的脚本集成。 有人请帮助我吗？ 到目前为止，这是我的代码： $(document).ready(function () { $(“#map”).css({ height: 600, width: 958 }); var jeLatLng = new google.maps.LatLng(17.74033553, 83.25067267); jeMap.init(‘#map’, jeLatLng, 11); $(“#showmarkers”).click(function (e) { jeMap.placeMarkers(‘markers.xml’); }); $(“#showmarkers2”).click(function (e) { jeMap.placeMarkers(‘markers2.xml’); }); }); var jeMap = { map: null } var UK = new google.maps.LatLng(21.192481, 0.0); jeMap.init = function (selector, latLng, […]

Google地图自动搜索页面加载

我在我的网页上使用Google Maps API v3，当前加载页面时，搜索框会预先填充我选择的搜索字词。 但我需要它实际上然后使用该术语搜索地图。 我似乎无法使用谷歌的API找到任何方法，所以我想也许我可以使用此代码模拟“输入”键按下： var e = jQuery.Event(“keydown”); e.which = 13; $(“#pac-input”).trigger(e); （ #pac-input是地图上标签的id） 然而，这似乎不起作用。 那么如何强制搜索页面加载？ 编辑：这是我正在谈论的搜索框

根据缩放级别更改图标

如何根据Google地图缩放级别更改图标的高度和宽度？ 我正在使用Google Maps api v3。

为什么我的地图在我的jQuery Mobile / Google Maps API3应用程序中居中？

我的jQuery Mobile Web应用程序中有一张由Google Maps Javascript API3提供支持的地图。 我添加了一个黑色边框的圆圈。 如果您直接使用地图转到我的应用的此页面，则地图会正确居中于圆的中心。 http://goo.gl/XvLST 如果你首先访问我的应用程序的这个主页（ http://goo.gl/0IWgE ），然后点击你的方式进入页面的地图，地图是 错误地居中（地图应该以圆心为中心）。 错过了整个灰色区域。 当我从主页点击带有地图的页面时，为什么地图会出错，但如果我直接访问带有地图的页面，工作正常？ 我可以不使用Ajax加载data-ajax=’false’的地图页面。 但是，我实际上无法做到这一点，因为移动应用程序不允许非ajax加载。 当我将地图输入Chrome Web Developer控制台时， google.maps.event.trigger(map, ‘resize’)似乎会重新定位地图，但我不确定在我的javascript中将其调用到何处。

使用谷歌地图computeDistanceBetween获取最近的位置返回NaN

好的，我在测试网站上设置了地图和自动填充字段。 我的目标是让用户在现场输入他/她的地址，然后当他/她点击确认根据提供的信息确定离他们最近的商店。 我有每个商店的lat / long，并且在自动完成的帮助下，我现在有lat / long的用户地址但是当我使用文档中提供的computeDistanceBetween方法时，我得到NaN而不是期望的结果。 这是测试网站的链接，以获得一个想法 – http://dev.touch-akl.com/map/ 以下是我到目前为止所尝试的内容 //—————————————————————- //— Search Box ————————————————- var input = document.getElementById(‘address’); var $confirm = $(‘#confirm’); var options = { types: [‘geocode’], componentRestrictions: {country: ‘nz’}//Turkey only }; var autocomplete = new google.maps.places.Autocomplete(input,options); autocomplete.bindTo(‘bounds’, map); $confirm.click(function(){ var _street = $(‘#address’).val(); var place = autocomplete.getPlace(); var _coordinates = place.geometry.location.toString(); […]