Tag: 谷歌地图

Google地图自动填充function除“place_changed”以外的其他活动

我有一个应用程序,目前正在place_changed正确激活。 但是,我想分支搜索,以便在用户选择自动填充条目时,以及在没有自动完成帮助的情况下自己输入文本时表现不同。 我应该使用什么样的事件监听器来区分? 我无法找到有关Google地图自动填充的其他活动的任何文档。 我现在拥有的: var gmaps = new google.maps.places.Autocomplete($(“#searchproperties”).get(0), { types: [‘geocode’], componentRestrictions: {country: ‘us’} }); google.maps.event.addListener(gmaps, ‘place_changed’, function () { //FIRE SEARCH });

Google地图无法完全加载

我有一个奇怪的问题。 我的网站上有两张地图,一张大地图和一张小地图。 我想用大的一个来显示到某个地址的路线。 我现在正在尝试实现这两个地图,但却遇到了一个奇怪的问题。 小地图工作正常,但在大地图上只有div的一小块区域填充了地图,其余的都是空的。 (见图。) 我使用以下代码显示两个映射: function initialize() { var latlng = new google.maps.LatLng(51.92475, 4.38206); var myOptions = {zoom: 10, center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP}; var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions); var marker = new google.maps.Marker({position: latlng, map:map, title:”Home”}); var image = ‘/Core/Images/Icons/citysquare.png’; var myLatLng = new google.maps.LatLng(51.92308, 4.47058); var cityCentre = new google.maps.Marker({position:myLatLng, map:map, icon:image, […]

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

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

自动填充地址+ Google Maps API

我想向用户提供一个文本框,其中可以输入他们的地址。 当他们键入地址时,我想向用户提供他们尝试键入的地址的建议/预测。 我也担心这个地址的相关性(例如,地址不是世界各地的地址)。 这可能吗? 我正在使用jQuery。

Google Maps API v3 – 在一个页面上创建带标记的多个地图

我正在尝试创建一个包含3张幻灯片的滑块,每张幻灯片都包含一个迷你地图,标记指向某个位置。 我设法创建了一张幻灯片,但是每次尝试在此页面上创建多个幻灯片都会导致失败。 这是我到目前为止的代码: HTML + PHP <?php $rows = get_field('job_offers'); $row_count = count($rows); for ($i = 0; $i <div id='googleMap’ style=”position:absolute;top:0;right:0;width:180px;height:100%;”> 和jQuery var geocoder = new google.maps.Geocoder(); var map; var locations = [“London”,’Paris’,’Barcelona’]; var pos; function initialize() { google.maps.visualRefresh = true; getGeoCode(); } function getGeoCode() { for (var i=0; i<3 ; i++) { geocoder.geocode({'address': locations[i]}, […]

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 […]

Reveal Modal中的Google Map API未完全显示

我在div中有一个谷歌地图有问题,按钮点击后会弹出屏幕。 谷歌地图只是部分显示。 我知道我需要创建一个resize事件,但不知道如何或放在哪里。 任何帮助将非常感激! 请记住,我对JS知之甚少! 链接到测试网站:点击谷歌地图按钮,看看手上的问题: http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html# 我的Google API脚本: function initialize() { var mapOptions = { center: new google.maps.LatLng(39.739318, -89.266507), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(“map_canvas”), mapOptions); } 包含地图的div: How to get here × 单击按钮时调用地图的脚本: $(document).ready(function() { $(‘#myModal1’).click(function() { $(‘#myModal’).reveal(); }); });

Google api v3在客户道路上显示附近的标记

我怎样才能显示标记(它们是预定义的,但是对于整个地图是隐藏的),这些标记位于我使用Google api v3选择的道路附近(可能是半径10英里或20英里), 例如我使用路线服务 HTML: start: end: JavaScript的: var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.891224, -87.638675); var mapOptions = { zoom:7, center: chicago } map = new google.maps.Map(document.getElementById(‘map’), mapOptions); directionsDisplay.setMap(map); /* === markers === */ var locations = [ [‘1’, 40.577651, […]

只执行一次函数

我有一个在click事件上执行的函数,但问题是我希望它只执行一次。 在点击时执行的function表示绘制到目标元素的谷歌地图。 该函数如下所示: Cluster.prototype.initiate_map_assembling = function(target, latitude, longitude) { var canvas = $(target).children(); var coordinates = new google.maps.LatLng(latitude, longitude); var options = { zoom: 9, center: coordinates, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map($(canvas)[0], options); var marker = new google.maps.Marker({ position: coordinates, map: map }); }; 我正在click事件上运行它: Cluster.prototype.initiate_google_maps_action = function() { var self = […]

使用类选择多个canvas时,Google地图无法使用

我目前正在构建一个能够动态渲染多个Google Maps实例的cms。 我目前的方法是找到所有具有类“gMapsCanvas”的div并为每个div初始化Gmaps。 Google地图的地址取自div的“数据地址”属性。 HTML示例: CSS: .gMapsCanvas { width: 100%; height: 100%; } JavaScript的 var GoogleMap = function(canvas, address) { var _parent = this; this.location = new google.maps.LatLng(-34.397, 150.644); var options = { center: this.location, zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_CENTER }, streetViewControl: false }; this.map = new google.maps.Map(canvas, options); var […]