eeasypeazy
posted this
25 October 2023
Hi, Can you please tell me how I can add custom Html code so I can view a map that I have created
Sorry but just in case I thought some insight into my request maybe useful so i have pasted in my Html code below.
<!DOCTYPE html>
<title>Maps Coordinate Selector</title>
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
</style>
body {
font-family: Arial, sans-serif;
}
select {
margin-bottom: 10px;
}
#map {
position: relative;
top: 10px;
left: 1px;
width: 99.8%;
height: 76vh;
}
.leaflet-top .leaflet-control {
margin-top: 50px;
}
.map-size-controls {
position:relative;
top: 20px;
margin-bottom: 50px;
}
.from-to-container {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 10px 0;
}
.from-input, .to-input {
display: flex;
align-items: center;
}
.from-input, .to-select {
display: flex;
align-items: center;
}
.from-input label, .to-input label {
display: inline-block;
margin-top:-15px;
margin-right: 5px;
}
.from-input textarea, .to-input textarea {
width: 30ch;
height: 1em;
resize: none;
line-height: 1;
}
.to-input {
margin-left: 2px;
}
.header {
padding: 10px 6px;
height: 52px;
background-color: #f5f5f5;
}
.header img {
max-width: 100%;
max-height: 100px;
margin-right: auto;
margin-left: auto;
}
.error{
border:1px solid red;
}
.locations-map{
margin-left:2px;
padding: 4px;
width:100%;
}
.float-right{
float:right;
}
.float-left{
float:left;
}
.form-group{
margin-bottom: 6px;
}
.middle_section{
margin-top:20px;
}
.get_data{
margin-left: -50px;
}
</style>
<div class="container-fluid top_fluid">
<div class="row content">
<div class="header">
<div class="float-left">
<h5 class="text-center"><b>Select a Location from the drop down list below or type in a To and From Location</b></h5>
</div>
<div class="float-right">
<div class="map-size-controls3"> </div>
</div>
</div>
<div class="col-sm-12 middle_section">
<div class="col-sm-6 col-lg-10">
<div class="col-sm-6 col-lg-8">
<div class="form-group">
<div class="from-input">
<div class="col-sm-2 col-lg-3">
<label for="fromLocation">From:</label>
</div>
<div class="col-sm-9 col-lg-9">
<input class="form-group input_field" style="width:100%;" id="fromLocation" placeholder="Arreton" value="arreton" />
</div>
</div>
</div>
<div class="form-group">
<div class="to-input">
<div class="col-sm-2">
<label for="toLocation">To:</label>
</div>
<div class="col-sm-9 col-lg-9 col-lg-offset-1">
<input class="form-group input_field" style="width:100%;" id="toLocation" value="gatehouse" placeholder="gatehouse" />
</div>
</div>
</div>
<input type="hidden" id="search_filter" value="" />
<input type="hidden" id="destination_filter" value="" />
<div class="form-group">
<div class="to-select">
<div class="col-sm-2 col-lg-3">
<label for="location">Location:</label>
</div>
<div class="col-sm-9 col-lg-9">
<select id="location" class="locations-map form-select form-select-lg" onchange="showOnOpenMaps()">
<option value="456486.13,83335.42">NEWPORT ROAD,APSE HEATH</option>
<option value="454244,085976">ARRETON STREET,ARRETON</option>
<option value="458076.04,90394.23">GATEHOUSE ROAD,ASHEY</option>
<option value="464584.44,87073.65">HOWGATE ROAD,BEMBRIDGE</option>
<option value="464733.15,87977.43">FORELAND ROAD,BEMBRIDGE</option>
<option value="463777.27,86654.34">HILLWAY ROAD,BEMBRIDGE</option>
<option value="463576.26,88396.9">EMBANKMENT ROAD,BEMBRIDGE</option>
<option value="463552.63,88411.96">EMBANKMENT ROAD,BEMBRIDGE</option>
<option value="464486.53,88309.81">HIGH STREET,BEMBRIDGE</option>
<option value="464996.35,87821.01">LANE END ROAD,BEMBRIDGE</option>
<option value="464347.33,88249.38">CHURCH ROAD,BEMBRIDGE</option>
<option value="464411.76,88234.1">HIGH STREET,BEMBRIDGE</option>
<option value="464420.95,88247.29">HIGH STREET,BEMBRIDGE</option>
<option value="464488.57,88311.49">HIGH STREET,BEMBRIDGE</option>
<option value="464636.82,88032.19">FORELAND ROAD,BEMBRIDGE</option>
<option value="464315.4,88410.7">KINGS ROAD,BEMBRIDGE</option>
<option value="457199.99,92243.32">NEWNHAM ROAD,BINSTEAD</option>
<option value="458029.4,92606.26">LADIES WALK,BINSTEAD</option>
<option value="457725.03,78052.92">EAST DENE LANE,BONCHURCH</option>
<option value="460683.71,87016.26">NEW ROAD,BRADING</option>
<option value="460099.63,85632.43">MORTON COMMON,BRADING</option>
<option value="448484.31,96638.9">EGYPT ESPLANADE,COWES</option>
<option value="448518.49,96639.39">EGYPT ESPLANADE,COWES</option>
<option value="448946.86,95505.39">PARK ROAD,COWES</option>
<option value="449603.26,96061.28">HIGH STREET,COWES</option>
<option value="449646.98,95907.02">SHOOTERS HILL,COWES</option>
<option value="449108.79,96207.83">CROSSFIELD AVENUE,COWES</option>
<option value="449461.41,96508.36">THE PARADE,COWES</option>
<option value="449466.2,96505.4">THE PARADE,COWES</option>
<option value="449472.15,96501.21">THE PARADE,COWES</option>
<option value="449107.9,96190.22">CROSSFIELD AVENUE,COWES</option>
<option value="449615.3,96124.42">HIGH STREET,COWES</option>
<option value="449629.59,96177.32">HIGH STREET,COWES</option>
<option value="449520.15,96463.47">THE PARADE,COWES</option>
<option value="449532.82,96464.68">THE PARADE,COWES</option>
<option value="449531.53,96453.56">THE PARADE,COWES</option>
<option value="449536.19,96449.42">THE PARADE,COWES</option>
<option value="449542.39,96443.13">THE PARADE,COWES</option>
<option value="449552.05,96435.2">THE PARADE,COWES</option>
<option value="449557.39,96429.34">THE PARADE,COWES</option>
<option value="449562.22,96423.73">THE PARADE,COWES</option>
<option value="449571.18,96412.61">THE PARADE,COWES</option>
<option value="449574.97,96407.87">THE PARADE,COWES</option>
<option value="449578.34,96402.61">THE PARADE,COWES</option>
<option value="449586.87,96390.12">THE PARADE,COWES</option>
<option value="449629.59,96183.68">HIGH STREET,COWES</option>
<option value="449626.94,96221.05">HIGH STREET,COWES</option>
<option value="449496.54,96444.11">BATH ROAD,COWES</option>
<option value="449573.18,96278.21">HIGH STREET,COWES</option>
<option value="449490.77,96487.1">THE PARADE,COWES</option>
<!-- Add other options here -->
</select>
</div>
</div>
</div>
<div class="form-group col-sm-12">
<label class="d-inline" for="allLocations">All other locations:</label><br/>
<input type="checkbox" class="d-inline" id="allLocations" onchange="showAllLocations()">
<button class="btn btn-success d-inline" onclick="showOnGoogleMaps()">Open Google Maps</button>
</div>
<br/>
<br/>
</div>
<div class="col-sm-5 col-lg-offset-1 col-lg-1">
<div class="form-group">
<div class="to-input">
<button class="get_data btn btn-success">Go</button>
</div>
</div>
</div>
</div>
Vote to pay developers attention to this features or issue.
