In this article I will explain how to move a marker to different locations on Google Maps i.e. How to change (update) position of a marker on Google Maps without refreshing the map.
Move Google Maps Markers: Change (Update) Marker position on Google Maps without refreshing
The following code snippet consists of an array of markers of different geographic address locations. Each marker in the array contains title, latitude, longitude and description of the location.
Inside the window.onload event handler, the LoadMap function is executed which displays the Google Map and also populates the first marker from the array on the map.
There is set of RadioButtons, where each RadioButron represents a location present in the JavaScript array. When a RadioButton is clicked the SetMarker function is executed and the value of the selected RadioButton is passed as parameter.
Using the value parameter, the details of the location is fetched and the marker position is updated on the Google Maps.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var markers = [ { "title": 'Aksa Beach', "lat": '19.1759668', "lng": '72.79504659999998', "description": 'Aksa Beach is a popular beach and a vacation spot in Aksa village at Malad, Mumbai.' }, { "title": 'Juhu Beach', "lat": '19.0883595', "lng": '72.82652380000002', "description": 'Juhu Beach is one of favourite tourist attractions situated in Mumbai.' }, { "title": 'Girgaum Beach', "lat": '18.9542149', "lng": '72.81203529999993', "description": 'Girgaum Beach commonly known as just Chaupati is one of the most famous public beaches in Mumbai.' }, { "title": 'Jijamata Udyan', "lat": '18.979006', "lng": '72.83388300000001', "description": 'Jijamata Udyan is situated near Byculla station is famous as Mumbai (Bombay) Zoo.' }, { "title": 'Sanjay Gandhi National Park', "lat": '19.2147067', "lng": '72.91062020000004', "description": 'Sanjay Gandhi National Park is a large protected area in the northern part of Mumbai city.' } ]; window.onload = function () { LoadMap(); }; var map; var marker; function LoadMap() { var mapOptions = { center: new google.maps.LatLng(markers[0].lat, markers[0].lng), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); SetMarker(0); }; function SetMarker(position) { //Remove previous Marker. if (marker != null) { marker.setMap(null); } //Set Marker on Map. var data = markers[position]; var myLatlng = new google.maps.LatLng(data.lat, data.lng); marker = new google.maps.Marker({ position: myLatlng, map: map, title: data.title }); //Create and open InfoWindow. var infoWindow = new google.maps.InfoWindow(); infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>"); infoWindow.open(map, marker); }; </script> <div> <label for="rbMarker0"> <input type="radio" id="rbMarker0" name="rbMarker" value="0" onclick="SetMarker(this.value)" checked="checked" />Aksa Beach</label><br /> <label for="rbMarker1"> <input type="radio" id="rbMarker1" name="rbMarker" value="1" onclick="SetMarker(this.value)" />Juhu Beach</label><br /> <label for="rbMarker2"> <input type="radio" id="rbMarker2" name="rbMarker" value="2" onclick="SetMarker(this.value)" />Girgaum Beach</label><br /> <label for="rbMarker3"> <input type="radio" id="rbMarker3" name="rbMarker" value="3" onclick="SetMarker(this.value)" />Jijamata Udyan</label><br /> <label for="rbMarker4"> <input type="radio" id="rbMarker4" name="rbMarker" value="4" onclick="SetMarker(this.value)" />Sanjay Gandhi National Park</label> </div> <hr /> <div id="dvMap" style="width: 400px; height: 500px"> </div>
转自:谷歌地图标记切换 Move Google Maps Markers: Change (Update) Marker position on Google Maps without refreshing
相关推荐
react使用高德地图react-amap:Map、Markers、Circle、ContextMenu、自定义ContextMenu
Google Maps标记 更新了Google Maps Marker Icons的“ Visual Refresh”版本。 Google的新标记图标看起来很棒,但是当我们需要自定义颜色和标签时,它们从未为我们提供与其匹配的PNG版本。 我继续使用ImageMagick和 ...
谷歌地图 大批量打点marker 聚合打点 例子,可以参考,国内可以打开。
一个老外(西班牙)编写的控件,封装了全部google maps api ,使用在DELPHI中使用谷歌地图变得非常简单 GMLib - Google Maps Library Send suggestions to gmlib@cadetill.com Supported Delphi version: Delphi 6...
Google Map Marker的显示与隐藏
unity在线地图Online Maps 2.5.16 需Unity 4.6.0或以上版本 Requires Unity 4.6.0 or higher. Features: ? Supports Unity v4.6+, Unity v5+; ? Standalone, Android, iOS, Windows Store, WebGL, Webplayer;...
:world_map: 适用于Android的Google Maps Chart 一个Google Maps Android库,用于将标记簇呈现为在Google Maps Android上按指定值分类的图表。 可用图表:,和 安装 确保您的存储库列表中包含JCenter: ...
画布标记 用于 Google 地图的基于画布的地图标记
特征将多个标记组合在一起为每个类别组分配自定义图标切换类别中所有标记的可见性添加类别过滤器控件自动将 google.maps.Marker 点击绑定到托管的 google.maps.InfoWindow 实例要求中等水平的 HTML5 和 JavaScript ...
Google Maps插件 该插件将使用创建一个交互式地图。 它将在指定HTML元素中创建地图,将地图以指定的纬度/经度坐标为中心,为提供的每个有效标记绘制一个标记(并在信息窗口中添加(如果提供)),并对每个标记编号。...
用法在标记中包含脚本后,您可以运行: new Donde ( { container : 'js-map', zoom : 15, defaultPosition : { latitude : - 34.8937720817105 , longitude : - 56.1659574508667 }, markers : [ { icon : 'img/...
查看项目的演示版本该项目的演示版本可从以下链接获得: 任务实现一个应用程序,该应用程序显示带有映射的对象标记的地图,该标记来自提供的映射到它的链接。 需要检索和显示对象。 通过单击列表中的对象,该对象将...
Google Maps标记的Font Awesome图标 此代码用于通过SVG标记和图标标签将Font Awesome与Google Maps API和Google Places API结合使用 快速开始 有2种方法可以快速下载和使用代码 。 克隆仓库: git clone ...
如何在地图上绘制数千个标记 问题 在地图上有数千个标记时,将鼠标悬停在任何标记上的动画将很慢。 这不是因为javascript,而是因为浏览器无法快速呈现它们。 所有这些图层合成事件都变得太慢而无法显示任何单个动画...
传单颜色标记 标准传单标记的颜色变化: 颜色 标记2x 记号笔 内部颜色 外面的颜色 蓝色的 #2A81CB #3274A3 金子 #FFD326 #C1A32D 红色的 #CB2B3E #982E40 绿色的 #2AAD27 #31882A 橙子 #CB...
#map.js 轻松绘制谷歌地图。 无需包含 Google Maps API,插件会自动包含它。 ##依赖 jQuery 1.4+ ##Functions drawMap : 在指定位置显示地址。 loadMarkers :显示地图中的标记列表。 getDirections :显示从一...
一个使用谷歌地图的简单 JavaScript 库。 特征 - Map - Geocoder - InfoWindow - Marker - Markers 版本 切换分支菜单以获取当前版本。 用 在您的 html 文件中加载脚本 google_maps.js 或 google_maps.min.js。 ...
标记.js 用于向 Google... Markers ( map , options ) map : google、bing 或 mapbox 地图options.createMarker :为集群创建地图标记的函数,默认为地图提供者的默认标记。 请参阅下面的更多详细信息。 options.creat
Online Maps - is a universal mapping solution that is suitable for all applications and games that use a map. Features: •Supports Unity v4.6+, Unity v5+; •Standalone, Android, iOS, Windows Store, ...
传单颜色编号标记 标准传单标记的颜色和数字变化: 颜色 标记 2x 标记 蓝色的 安装 npm install --save leaflet-color-number-markers # Or yarn add leaflet-color-number-markers 用法 已安装 import icons ...