This example adds a UI control that allows the user to remove the polyline from the map.
Read the documentation.
TypeScript
// This example adds a UI control allowing users to remove the polyline from the
// map.
let flightPath: google.maps.Polyline;
let map: google.maps.Map;
function initMap(): void {
map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
zoom: 3,
center: { lat: 0, lng: -180 },
mapTypeId: "terrain",
});
const flightPathCoordinates: google.maps.LatLngLiteral[] = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 },
];
flightPath = new google.maps.Polyline({
path: flightPathCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
});
addLine();
}
function addLine() {
flightPath.setMap(map);
}
function removeLine() {
flightPath.setMap(null);
}
JavaScript
// This example adds a UI control allowing users to remove the polyline from the
// map.
let flightPath;
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 3,
center: { lat: 0, lng: -180 },
mapTypeId: "terrain",
});
const flightPathCoordinates = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 },
];
flightPath = new google.maps.Polyline({
path: flightPathCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
});
addLine();
}
function addLine() {
flightPath.setMap(map);
}
function removeLine() {
flightPath.setMap(null);
}
CSS
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: "Roboto", "sans-serif";
line-height: 30px;
padding-left: 10px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Removing Polylines</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script src="./index.js"></script>
</head>
<body>
<div id="floating-panel">
<input onclick="removeLine();" type="button" value="Remove line" />
<input onclick="addLine();" type="button" value="Restore line" />
</div>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
async
></script>
</body>
</html>
All
<!DOCTYPE html>
<html>
<head>
<title>Removing Polylines</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style type="text/css">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: "Roboto", "sans-serif";
line-height: 30px;
padding-left: 10px;
}
</style>
<script>
// This example adds a UI control allowing users to remove the polyline from the
// map.
let flightPath;
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 3,
center: { lat: 0, lng: -180 },
mapTypeId: "terrain",
});
const flightPathCoordinates = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 },
];
flightPath = new google.maps.Polyline({
path: flightPathCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
});
addLine();
}
function addLine() {
flightPath.setMap(map);
}
function removeLine() {
flightPath.setMap(null);
}
</script>
</head>
<body>
<div id="floating-panel">
<input onclick="removeLine();" type="button" value="Remove line" />
<input onclick="addLine();" type="button" value="Restore line" />
</div>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
async
></script>
</body>
</html>
// This example adds a UI control allowing users to remove the polyline from the
// map.
let flightPath;
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 3,
center: { lat: 0, lng: -180 },
mapTypeId: "terrain",
});
const flightPathCoordinates = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 },
];
flightPath = new google.maps.Polyline({
path: flightPathCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
});
addLine();
}
function addLine() {
flightPath.setMap(map);
}
function removeLine() {
flightPath.setMap(null);
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: "Roboto", "sans-serif";
line-height: 30px;
padding-left: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Removing Polylines</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="floating-panel">
<input onclick="removeLine();" type="button" value="Remove line" />
<input onclick="addLine();" type="button" value="Restore line" />
</div>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=&v=weekly"
async
></script>
</body>
</html>