How can I remove pins from google maps when selecting new location from select menu?
How can I remove pins from google maps when selecting new location from select menu?
I have created a simple map with a drop down that allows a user to select a college campus location. Now I am trying to have the previous selection clear when a new location is selected.. any suggestions with this would be great.
I know there has to be a better way to do this instead of creating the multiple variables and functions but it just needs to be functional at this point.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="styles.css" />
<script src="https://maps.googleapis.com/maps/api/js?key=
AIzaSyDCnqMp9UXHgRIu0A9vWtn2MFiO1Ze-sq8
&callback=initMap"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<header>
<div class="ui-body ui-body-a ui-corner-all">
<h3>BCIT Campuses</h3>
<p>This app is designed to show you the various BCIT Campus locations</p>
</div>
</header>
<form>
<div class="ui-field-contain">
<label for="select-native-1">Select a campus</label>
<select id="location" name="location">
<option disabled selected> -- select a location -- </option>
<option value="DTN" onClick="downtownPin()">Downtown Campus</option>
<option id="BBY" name="burnaby" value="BBY" onClick="burnabyPin()">Burnaby Campus</option>
<option id="ANN" value="ANN" onClick="annacisPin()">Annacis Campus</option>
</select>
</div>
</form>
<div data-role="page" id="map-page" data-url="map-page">
<div data-role="header" data-theme="a">
<h1>Maps</h1>
</div>
<div role="main" class="ui-content" id="map-canvas">
<!-- map loads here... -->
</div>
</div>
<footer>
<div class="ui-body ui-body-a ui-corner-all">
<h4>Wade Barrie</h4>
</div>
</footer>
</body>
<script>
/*
* Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html
* Geolocation documentation: http://dev.w3.org/geo/api/spec-source.html
*/
var map;
function myMap()
var mapCanvas = document.getElementById("map-canvas");
var mapOptions =
center: new google.maps.LatLng(49.2595139, -123.1133546),
zoom: 10
;
map = new google.maps.Map(mapCanvas, mapOptions);
var myLatlng = new google.maps.LatLng(49.283333, -123.115556);
var downtownCampus = new google.maps.LatLng(49.283333, -123.115556);
var annacisCampus = new google.maps.LatLng(49.1636275, -122.9702631);
var burnabyCampus = new google.maps.LatLng(49.2505981, -123.0020511);
var mapOptions =
zoom: 10,
center: myLatlng
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var downtownCampus = new google.maps.Marker(
position: downtownCampus,
title: "Downtown Campus"
);
var annacisCampus = new google.maps.Marker(
position: annacisCampus,
title: "Annacis Island"
);
var burnabyCampus = new google.maps.Marker(
position: burnabyCampus,
title: "Burnaby Campus"
);
// functions that actually place the pin on the map when selected
function annacisPin(reload)
annacisCampus.setMap(map);
function downtownPin()
downtownCampus.setMap(map);
function burnabyPin()
burnabyCampus.setMap(map);
</script>
</html>
1 Answer
1
You can use yourmarker.setMap(null) to remove a marker from the map before displaying the next one. setMap(map) adds a marker to the map. setMap(null) removes it.
yourmarker.setMap(null)
One thing to remember is the D.R.Y. (Don't Repeat Yourself) principle. Instead of writing functions for each marker, write one function that generates a chosen marker. So on a menu-item click event, pass in the the campus title and the coordinates, clear the map of existing markers, and render the new one with the given parameters. Now you have fewer lines of code, and a reusable function.
– Marcus Sacco
Sep 15 '18 at 7:16
Ah yes. Just learning about these concepts and will keep this in mind going forward. Thanks again!
– WadeB
Sep 17 '18 at 0:53
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
That worked really well. Thank you! I just placed it inside my set pin functions. It might not be the cleanest way to do this but it works for my purposes.
– WadeB
Sep 15 '18 at 1:50