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
相关推荐
在使用Google Maps API进行Web开发时,经常需要在地图上添加标记(Marker)来指示特定的位置。本教程将深入探讨如何在Google Maps中控制Marker的显示与隐藏,以实现更灵活的地图交互体验。 首先,我们需要了解...
谷歌地图(Google Maps)是全球广泛使用的在线地图服务,它提供了卫星图像、街景、实时交通状况、导航等功能。Google Map API(Application Programming Interface)则是谷歌为开发者提供的接口,允许他们将谷歌地图...
在地图上添加标记是常见的需求,可以通过`google.maps.Marker`对象实现。同时,可以为标记添加信息窗口显示详细信息。 ```javascript var marker = new google.maps.Marker({ position: myLatLng, map: map, ...
Vue2googlemap支持Google Maps API中的各种事件监听,如点击地图、标记、路径等,可以很方便地在Vue组件中响应这些事件。 5. **自定义组件** 除了内置组件,还可以根据需求自定义组件,实现更复杂的地图交互逻辑...
在`react-amap`中,我们可以创建一个Marker组件,通过`position`属性指定标记点的经纬度坐标,`icon`属性可以设置标记点的图标,同时还可以添加点击事件监听器以实现交互功能。 4. **Circle**: Circle组件用于在...
此外,Google Map API 还支持添加自定义标记(markers)、信息窗口(infowindows)、覆盖物(overlays)等元素,以增强地图的交互性和信息展示。例如,你可以创建一个带有自定义图标和信息窗口的标记: ```...
例如,你可以添加标记(markers)来表示特定位置,通过`new google.maps.Marker`对象实现: ```javascript var marker = new google.maps.Marker({ position: map.getCenter(), map: map, title: '我的位置' });...
谷歌地图API V3提供了丰富的功能,如添加标记(Markers)、信息窗口(InfoWindows)和路径(Polylines)。比如,我们可以这样添加一个标记: ```javascript var marker = new google.maps.Marker({ position: ...
谷歌地图 大批量打点marker 聚合打点 例子,可以参考,国内可以打开。
要在地图上添加标记,我们可以使用`google.maps.Marker`对象。同时,还可以通过信息窗口展示更多详细信息: ```javascript var marker = new google.maps.Marker({ position: myLatLng, map: map, title: '悉尼'...
这个压缩包“Google_Map_Api_谷歌地图接口整理.rar”包含了一个详细的文档“Google_Map_Api_谷歌地图接口整理.doc”,很可能是关于如何使用谷歌地图API的教程或参考指南。下面,我们将深入探讨谷歌地图API的关键知识...
Google Maps标记 更新了Google Maps Marker Icons的“ Visual Refresh”版本。 Google的新标记图标看起来很棒,但是当我们需要自定义颜色和标签时,它们从未为我们提供与其匹配的PNG版本。 我继续使用ImageMagick和 ...
在IT行业中,Google Maps API是一个极其重要的工具,它允许开发者集成地图功能到自己的网站或应用程序中,提供导航、定位、地理编码、路线规划等多种服务。本篇将详细讲解基于JavaScript的Google Maps API的使用,...
在本文中,我们将深入探讨“canvas-markers”这一专为Google地图设计的JavaScript库,它提供了基于HTML5画布的自定义地图标记功能。通过使用画布标记,开发者可以实现更高效、更灵活且视觉效果丰富的地图应用。 一...
谷歌地图开发包GoogleMap是一个专为开发者设计的工具,它提供了丰富的API和功能,使得开发者可以集成谷歌地图服务到自己的应用程序中,无论是Web应用、移动应用还是其他平台的应用。这个开发包是谷歌地图服务的重要...
GoogleMap API提供了一系列接口,如地图视图、标记(Markers)、信息窗口(InfoWindows)、折线(Polylines)和多边形(Polygons)等,用于显示地理位置、添加标注、绘制路径等。此外,API还支持地理编码(Geocoding...
一个老外(西班牙)编写的控件,封装了全部google maps api ,使用在DELPHI中使用谷歌地图变得非常简单 GMLib - Google Maps Library Send suggestions to gmlib@cadetill.com Supported Delphi version: Delphi 6...
2. **标记(Markers)**:标记是地图上的点状图标,可以用来表示特定位置。你可以自定义标记的图标、信息窗口以及点击事件。 3. **信息窗口(Info Windows)**:当用户点击标记时,可以弹出一个包含详细信息的小...
5. **添加标记(Markers)**:通过`google.maps.Marker`类可以向地图上添加点标记,表示特定的地理位置。你可以自定义标记的图标、点击事件等。 6. **信息窗口(InfoWindows)**:当你点击地图上的标记时,可以弹出...
在本文中,我们将深入探讨如何在Qt环境中加载和使用百度地图及谷歌地图。Qt是一个功能强大的C++图形用户界面库,它可以与JavaScript和HTML结合,为开发者提供丰富的Web交互功能。我们将主要关注如何利用QWebView类来...