Overlapping when multi poppers are appeared on the screen

Overlapping when multi poppers are appeared on the screen - javascript

I need to show multi popper elements on the page at the same time. But the problem is that there is an overlapping when two of them are close to each other. Is there a way to solve this?
I give my code which is related to popper elements below.
I use tippy.js inside leaflet. There are markers in specific coordinates of the leaflet image. And I would like to show some html content inside tippies when clicked to these markers. The problem starts when I wanna show multi tippies at the same time. Thanks for your help.
var data = [
{
latLng: [160, -100],
tippyContent: document.getElementById('exampleTable1').innerHTML,
},
{
latLng: [240, 100],
tippyContent: document.getElementById('exampleTable1').innerHTML,
}
];
var map = L.map('map', {
crs: L.CRS.Simple,
minZoom: 0,
maxZoom: 0,
zoomControl: false,
dragging: false,
attributionControl: false,
autoPan: false
});
map.scrollWheelZoom.disable();
map.doubleClickZoom.disable();
var yx = L.latLng;
var xy = function (x, y) {
if (L.Util.isArray(x)) { // When doing xy([x, y]);
return yx(x[1], x[0]);
}
return yx(y, x); // When doing xy(x, y);
};
var bounds = [xy(-120, -300), xy(120, 300)];
var image = L.imageOverlay('https://static8.depositphotos.com/1022400/1002/i/950/depositphotos_10024914-stock-photo-vertical-beach.jpg', bounds).addTo(map);
var markers = [];
data.forEach(function (element, index) {
markers[index] = L.marker(element.latLng, {
draggable: false,
autoPan: false,
}).addTo(map);
});
map.setView(xy(0, 0), 1);
data.forEach(function (element, index) {
tippy(markers[index]._icon, {
content: element.tippyContent, // diğer tippy metotları da eklenebilir.
trigger: 'mouseenter click',
allowHTML: 'true',
hideOnClick: 'toggle',
maxWidth: 'none',
interactive: 'true',
placement: 'auto',
appendTo: document.body,
});
});
function showAllMarkersTippies() {
hideAllMarkersTippies();
markers.forEach(function (marker) {
marker._icon.click();
});
}
function hideAllMarkersTippies() {
markers.forEach(function (marker) {
marker._icon._tippy.hide();
});
}
#map {
height: 660px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
color:#333333
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 5px;
}
tr {
background-color: #fff;
}
<link href="https://github.com/mapshakers/leaflet-icon-pulse/blob/master/src/L.Icon.Pulse.css" rel="stylesheet"/>
<link href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/#popperjs/core#2.4.4/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js#6.2.6/dist/tippy-bundle.umd.js"></script>
<script src="https://raw.githubusercontent.com/mapshakers/leaflet-icon-pulse/master/src/L.Icon.Pulse.js"></script>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"></script>
<button type="button"
class="btn btn-secondary ml-3 pull-right"
onclick="hideAllMarkersTippies()">Hide All</button>
<button type="button"
class="btn btn-secondary ml-3 pull-right"
onclick="showAllMarkersTippies()">Show All</button>
<div id="exampleTable1" style="display:none;">
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds</td>
<td>Maria</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro com</td>
<td>Francisco</td>
<td>Mexico</td>
</tr>
</table>
</div>
<div id="map"></div>
Result image is shown below.

Related

Bootstrap Datatables Javascript - Lengthmenu and export buttons too smooshed against each other - want to create line break between the two

I have a searchable table I'm developing where users need to be able to export their results, but also select the number of results they see. The problem is that everything looks too crammed together. I want to be able to add a line break, paragraph, or a div to space things out. Basically, I want this:
Project Search Show [Number] Entries
[Copy] [Excel] [CSV] [PDF] [Column Visibility]
[My table]
How would I go about doing this? I can't rely on my trusty BR and P html tags here, but I would like to figure this out.
$(document).ready(function() {
$('#example').DataTable({
"lengthMenu": [10, 25, 50, 75, 100],
dom: 'lBfrtip',
"columnDefs": [{
"targets": [],
"visible": false,
"searchable": false
},
{
"targets": [],
"visible": false
}
],
buttons: [{
extend: 'copyHtml5',
exportOptions: {
columns: ':visible',
format: {
body: function(data, row, column, node) {
var text = node.textContent;
return column === 10 ? text.replace(/Open$/, '').trim() : data;
}
}
}
},
{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible',
format: {
body: function(data, row, column, node) {
var text = node.textContent;
return column === 10 ? text.replace(/Open$/, '').trim() : data;
}
}
}
},
{
extend: 'csvHtml5',
exportOptions: {
columns: ':visible',
format: {
body: function(data, row, column, node) {
var text = node.textContent;
return column === 10 ? text.replace(/Open$/, '').trim() : data;
}
}
}
},
{
extend: 'pdfHtml5',
orientation: 'landscape',
exportOptions: {
columns: ':visible',
format: {
body: function(data, row, column, node) {
var text = node.textContent;
return column === 10 ? text.replace(/Open$/, '').trim() : data;
}
}
}
},
'colvis'
]
});
});
div.dt-button-collection {
width: 215px;
}
.display.dataTable {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 12px;
}
.modal {
max-width: 1000px;
margin: 2rem auto;
}
td.none {
display: none;
}
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<link rel "=stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<table id="example" class="display">
<thead>
<tr>
<th class="all" data-toggle="tooltip" title="The known name of the project.">Project Name</th>
<th class="all" data-toggle="tooltip" title="The provided unique ID that distinguishes projects.">Project Number</th>
<th class="all" data-toggle="tooltip" title="The conclusing time point of a project, which is sometimes, but not always the point at which funding ends.">End Date</th>
<th class="all" data-toggle="tooltip" title="The primary funder of the project.">Funder</th>
<th class="all" data-toggle="tooltip" title="A brief description on the scope and aims of a project.">Abstract</th>
</tr>
</thead>
<tbody>
<tr>
<td>Project 1</td>
<td>P-1</td>
<td>2018-04-30 00:00:00</td>
<td>NIH</td>
<td>
<div id="ex83" class="modal">
<p>
Abstract 1
</div>
<p><button class="button">Open<span></span></button></p>
</td>
</tr>
<tr>
<td>Project 2</td>
<td>P-2</td>
<td>2024-03-31 00:00:00</td>
<td>NIH</td>
<td>
<div id="ex103" class="modal">
<p>
Abstract 2
</div>
<p><button class="button">Open<span></span></button></p>
</td>
</tr>
<tr>
<td>Project 3</td>
<td>P-3</td>
<td>2021-01-31 00:00:00</td>
<td>NIH</td>
<td>
<div id="ex111" class="modal">
<p> Abstract 3</p>
</div>
<p><button class="button">Open<span></span></button></p>
</td>
</tr>
</tbody>
</table>

If I understood you correctly, I only added this CSS rule:
.dataTables_length {
position: relative;
float: none !important;
text-align: center;
}
Obviously, if you don't want the Show [Number] Entries horizontally centered, just remove text-align: center;
$(document).ready(function() {
$('#example').DataTable({
"lengthMenu": [10, 25, 50, 75, 100],
dom: '<l>Bfrtip',
"columnDefs": [{
"targets": [],
"visible": false,
"searchable": false
},
{
"targets": [],
"visible": false
}
],
buttons: [{
extend: 'copyHtml5',
exportOptions: {
columns: ':visible',
format: {
body: function(data, row, column, node) {
var text = node.textContent;
return column === 10 ? text.replace(/Open$/, '').trim() : data;
}
}
}
},
{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible',
format: {
body: function(data, row, column, node) {
var text = node.textContent;
return column === 10 ? text.replace(/Open$/, '').trim() : data;
}
}
}
},
{
extend: 'csvHtml5',
exportOptions: {
columns: ':visible',
format: {
body: function(data, row, column, node) {
var text = node.textContent;
return column === 10 ? text.replace(/Open$/, '').trim() : data;
}
}
}
},
{
extend: 'pdfHtml5',
orientation: 'landscape',
exportOptions: {
columns: ':visible',
format: {
body: function(data, row, column, node) {
var text = node.textContent;
return column === 10 ? text.replace(/Open$/, '').trim() : data;
}
}
}
},
'colvis'
]
});
});
div.dt-button-collection {
width: 215px;
}
.display.dataTable {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 12px;
}
.modal {
max-width: 1000px;
margin: 2rem auto;
}
td.none {
display: none;
}
div.dt-buttons {
float: none;
}
.dataTables_length {
position: relative;
float: none !important;
text-align: center;
}
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<link rel "=stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<table id="example" class="display">
<thead>
<tr>
<th class="all" data-toggle="tooltip" title="The known name of the project.">Project Name</th>
<th class="all" data-toggle="tooltip" title="The provided unique ID that distinguishes projects.">Project Number</th>
<th class="all" data-toggle="tooltip" title="The conclusing time point of a project, which is sometimes, but not always the point at which funding ends.">End Date</th>
<th class="all" data-toggle="tooltip" title="The primary funder of the project.">Funder</th>
<th class="all" data-toggle="tooltip" title="A brief description on the scope and aims of a project.">Abstract</th>
</tr>
</thead>
<tbody>
<tr>
<td>Project 1</td>
<td>P-1</td>
<td>2018-04-30 00:00:00</td>
<td>NIH</td>
<td>
<div id="ex83" class="modal">
<p>
Abstract 1
</div>
<p><button class="button">Open<span></span></button></p>
</td>
</tr>
<tr>
<td>Project 2</td>
<td>P-2</td>
<td>2024-03-31 00:00:00</td>
<td>NIH</td>
<td>
<div id="ex103" class="modal">
<p>
Abstract 2
</div>
<p><button class="button">Open<span></span></button></p>
</td>
</tr>
<tr>
<td>Project 3</td>
<td>P-3</td>
<td>2021-01-31 00:00:00</td>
<td>NIH</td>
<td>
<div id="ex111" class="modal">
<p> Abstract 3</p>
</div>
<p><button class="button">Open<span></span></button></p>
</td>
</tr>
</tbody>
</table>
By the way, you didn't say anything about the Search box

How to make the infobox of a specific marker be opened by default after i click "show map" button ( similar to Airbnb)?

I have a map with markers for all hotels on a specific area and when i click on each marker display the infobox of each hotel. This map opens on modal window.
I would like when I am on the page of a specific hotel and the user clicks on "View Larger Map" button, the map to be displayed with the infobox of that particular hotel open by default without having to click on that marker (like airbnb map).
I tried to change the click event on google maps with tilesloaded or bounds_changed but it did not work.
google.maps.event.addListener(marker, 'click', (function () {...}));
I also tried
function onHtmlClick(key){
google.maps.event.trigger(markers[key], "click");
}
<a href="#" class="btn_map location_map_btn properties" data-
toggle="modal" data-target="#myModal" onclick="onHtmlClick(1)">View Larger
Map <i class="icon-location-5"></i></a>
but it did not work.
(function(A) {
if (!Array.prototype.forEach)
A.forEach = A.forEach || function(action, that) {
for (var i = 0, l = this.length; i < l; i++)
if (i in this)
action.call(that, this[i], i, this);
};
})(Array.prototype);
var
mapObject,
markers = [],
markersData = {
'Single_hotel': [
{
name: 'Villas',
location_latitude: 37.713490,
location_longitude: 20.980900,
map_image_url: 'img/villas/280.jpg',
name_point: 'Aeolos Luxury Villas',
description_point: 'Lorem Ipsum',
get_directions_start_address: '',
phone: '+30 2641 085625',
url_point: 'single_hotel.html'
},
{
name: 'Villas2',
location_latitude: 37.713490,
location_longitude: 20.980900,
map_image_url: 'img/villas/280.jpg',
name_point: 'Aeolos Luxury Villas',
description_point: 'Lorem Ipsum',
get_directions_start_address: '',
phone: '+30 2641 085625',
url_point: 'single_hotel.html'
}
]
};
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(37.859490, 20.925600),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.LEFT_CENTER
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_LEFT
},
scrollwheel: false,
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
]
};
var
marker;
mapObject = new google.maps.Map(document.getElementById('map_modal'), mapOptions);
for (var key in markersData)
markersData[key].forEach(function (item) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(item.location_latitude, item.location_longitude),
map: mapObject,
icon: 'img/pins/' + key + '.png',
});
if ('undefined' === typeof markers[key])
markers[key] = [];
markers[key].push(marker);
google.maps.event.addListener(marker, 'click', (function () {
closeInfoBox();
getInfoBox(item).open(mapObject, this);
mapObject.setCenter(new google.maps.LatLng(item.location_latitude, item.location_longitude));
}));
});
function hideAllMarkers () {
for (var key in markers)
markers[key].forEach(function (marker) {
marker.setMap(null);
});
};
function closeInfoBox() {
$('div.infoBox').remove();
};
function getInfoBox(item) {
return new InfoBox({
content:
'<div class="marker_info" id="marker_info">' +
'<img src="' + item.map_image_url + '" alt="Image"/>' +
'<h3>'+ item.name_point +'</h3>' +
'<span>'+ item.description_point +'</span>' +
'<div class="marker_tools">' +
'<form action="http://maps.google.com/maps" method="get" target="_blank" style="display:inline-block""><input name="saddr" value="'+ item.get_directions_start_address +'" type="hidden"><input type="hidden" name="daddr" value="'+ item.location_latitude +',' +item.location_longitude +'"><button type="submit" value="Get directions" class="btn_infobox_get_directions">Directions</button></form>' +
''+ item.phone +'' +
'</div>' +
'Details' +
'</div>',
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(10, 125),
closeBoxMargin: '5px -20px 2px 2px',
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
isHidden: false,
alignBottom: true,
pane: 'floatPane',
enableEventPropagation: true
});
};
<!-- Button to Open the Modal -->
View Larger Map <i class="icon-location-5"></i>
<!-- The Modal map-->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Search By Map</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div id="map_modal" class="map"></div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn_map location_map_btn properties" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End modal map -->

Your "markers array" is a object with the key "Single_villas", then an array of google.maps.Markers in that property. To trigger a click event on a single marker your onHtmlClick function needs to be something like:
function onHtmlClick(key,key2) {
google.maps.event.trigger(markers[key][key2], "click");
}
proof of concept fiddle
code snippet:
(function(A) {
if (!Array.prototype.forEach)
A.forEach = A.forEach || function(action, that) {
for (var i = 0, l = this.length; i < l; i++)
if (i in this)
action.call(that, this[i], i, this);
};
})(Array.prototype);
var
mapObject,
markers = [],
markersData = {
'Single_hotel': [{
name: 'Villas',
location_latitude: 37.713490,
location_longitude: 20.980900,
map_image_url: 'img/villas/280.jpg',
name_point: 'Aeolos Luxury Villas 0',
description_point: 'Lorem Ipsum',
get_directions_start_address: '',
phone: '+30 2641 085625',
url_point: 'single_hotel.html'
},
{
name: 'Villas2',
location_latitude: 37.713,
location_longitude: 20.980,
map_image_url: 'img/villas/280.jpg',
name_point: 'Aeolos Luxury Villas 1',
description_point: 'Lorem Ipsum',
get_directions_start_address: '',
phone: '+30 2641 085625',
url_point: 'single_hotel.html'
}
]
};
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(37.859490, 20.925600),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.LEFT_CENTER
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_LEFT
},
scrollwheel: false,
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
};
var marker;
var bounds = new google.maps.LatLngBounds();
mapObject = new google.maps.Map(document.getElementById('map_modal'), mapOptions);
for (var key in markersData) {
markersData[key].forEach(function(item) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(item.location_latitude, item.location_longitude),
map: mapObject,
// icon: 'img/pins/' + key + '.png',
});
bounds.extend(marker.getPosition());
mapObject.fitBounds(bounds);
if ('undefined' === typeof markers[key])
markers[key] = [];
markers[key].push(marker);
console.log(markers);
google.maps.event.addListener(marker, 'click', (function() {
closeInfoBox();
getInfoBox(item).open(mapObject, this);
mapObject.setCenter(new google.maps.LatLng(item.location_latitude, item.location_longitude));
}));
});
}
function onHtmlClick(key, key2) {
google.maps.event.trigger(markers[key][key2], "click");
}
function hideAllMarkers() {
for (var key in markers)
markers[key].forEach(function(marker) {
marker.setMap(null);
});
};
function closeInfoBox() {
$('div.infoBox').remove();
};
function getInfoBox(item) {
return new InfoBox({
content: '<div class="marker_info" id="marker_info" style="border: 1px solid black; margin-top: 8px; background: white; padding: 5px;">' +
// '<img src="' + item.map_image_url + '" alt="Image"/>' +
'<h3>' + item.name_point + '</h3>' +
'<span>' + item.description_point + '</span>' +
'<div class="marker_tools">' +
'<form action="http://maps.google.com/maps" method="get" target="_blank" style="display:inline-block""><input name="saddr" value="' + item.get_directions_start_address + '" type="hidden"><input type="hidden" name="daddr" value="' + item.location_latitude + ',' + item.location_longitude + '"><button type="submit" value="Get directions" class="btn_infobox_get_directions">Directions</button></form>' +
'<br/>' + item.phone + '' +
'</div>' +
'Details' +
'</div>',
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(10, 125),
closeBoxMargin: '5px -20px 2px 2px',
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
isHidden: false,
alignBottom: true,
pane: 'floatPane',
enableEventPropagation: true
});
};
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 80%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.map {
height: 400px;
width: 500px;
}
.marker_info {
background
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Button to Open the Modal -->
View Larger Map (Single_hotel[0])<i class="icon-location-5"></i><br>
View Larger Map (Single_hotel[1])<i class="icon-location-5"></i>
<!-- The Modal map-->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Search By Map</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div id="map_modal" class="map"></div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn_map location_map_btn properties" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End modal map -->
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library#master/infobox/src/infobox.js"></script>

How to create graph from only one column of a HTML table in HighCharts?

I have already made column range chart from the min and max values. Now I want to show mean(average) column of the table as scatter plot points on these columnranges. For this purpose I will just need data of the mean column to create scatter points.
I am unsure on how to tackle this problem.
chart: {
type: 'columnrange',
inverted: true
},
data: {
table: 'datatable'
tooltip: {
formatter : function() {
return '<strong> Range: </strong>' + this.y + ' to ' +this.x;
}
},
legend: {
enabled: false
}
I would like to have scatterpoints showing mean of the min and max values on the columnrange lines of the graph. Also a tooltip displaying the range and average of the numbers would be great.
The JSfiddle of the columnrange graph is here.

You can achieve it by following this approach:
using Highcharts.Data.prototype.parseTable get the last column with mean values
filter mean values to get numbers
use chart.addSeries method on load event to add scatter points
Code:
$(function() {
const table = Highcharts.Data.prototype.parseTable.call({
options: {
table: "datatable",
},
columns: [],
dataFound: () => {}
});
const scatterData = table[3].reduce((filtered, elem) => {
const value = +elem;
if (!isNaN(value)) {
filtered.push(value);
}
return filtered;
}, []);
Highcharts.chart('container', {
chart: {
type: 'columnrange',
inverted: true,
events: {
load: function() {
this.addSeries({
type: 'scatter',
data: scatterData
})
}
}
},
yAxis: {
title: {
text: 'Mean difference (d)'
}
},
data: {
table: 'datatable'
},
plotOptions: {
columnrange: {
pointWidth: 5,
}
},
tooltip: {
formatter: function() {
if (this.point.low) {
return '<strong> Range: </strong>' + this.point.low + ' to ' + this.point.high;
} else {
return '<strong> Mean: </strong>' + this.y;
}
}
},
legend: {
enabled: false
}
});
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 40%;
}
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="width: 40%; height: 300px; float: right"></div>
<table id="datatable">
<thead>
<tr>
<th>Treatment</th>
<th>Min</th>
<th>Max</th>
<th>Mean</th>
</tr>
</thead>
<tbody>
<tr>
<td>Drug1</td>
<td>-5</td>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>Drug2</td>
<td>2</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>Drug3</td>
<td>5</td>
<td>11</td>
<td>8</td>
</tr>
<tr>
<td>Drug4</td>
<td>3</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>Drug5</td>
<td>-2</td>
<td>4</td>
<td>1.5</td>
</tr>
</tbody>
</table>
Demo:
https://jsfiddle.net/BlackLabel/7znLy09r/1/
API reference:
https://api.highcharts.com/class-reference/Highcharts.Data#parseTable
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries
https://api.highcharts.com/highcharts/chart.events.load

Google Maps API -- adding simple buttons to turn left, turn right, etc

I'm using the Google Maps API, working in JavaScript/HTML. I'm trying to add simple buttons. If the user presses these buttons, it will turn left, turn right, etc on the map. However, my function changeHeading is being called, but not executing after it's called. What is the problem?
<head>
<meta charset="utf-8">
<title>Street View Add Third Panel</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
float: left;
height: 50%;
width: 50%;
}
#pano {
width: 100%;
height: 50%;
}
#floating-panel {
float: right;
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="floating-panel">
<table>
<tr>
<td><b>Position</b></td><td id="position-cell"> </td>
</tr>
<tr>
<td><b>POV Heading</b></td><td id="heading-cell">270</td>
</tr>
<tr>
<td><b>POV Pitch</b></td><td id="pitch-cell">0.0</td>
</tr>
<tr>
<td><b>Pano ID</b></td><td id="pano-cell"> </td>
</tr>
<tr>
<input type="button" value="Turn Left" onclick="changeHeading(-5);">
</tr>
<tr>
<input type="button" value="Turn Right" onclick="changeHeading(-5);">
</tr>
<tr>
<input type="button" value="Go Forward" onclick="changeHeading(-5);">
</tr>
<tr>
<input type="button" value="Go Backward" onclick="changeHeading(-5);">
</tr>
<table id="links_table"></table>
</table></div>
<div id="pano"></div>
<script>
function initialize() {
var fenway = {lat: 42.345573, lng: -71.098326};
var map = new google.maps.Map(document.getElementById('map'), {
center: fenway,
zoom: 14
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
panorama.addListener('pano_changed', function() {
var panoCell = document.getElementById('pano-cell');
panoCell.innerHTML = panorama.getPano();
});
panorama.addListener('links_changed', function() {
var linksTable = document.getElementById('links_table');
while (linksTable.hasChildNodes()) {
linksTable.removeChild(linksTable.lastChild);
}
var links = panorama.getLinks();
for (var i in links) {
var row = document.createElement('tr');
linksTable.appendChild(row);
var labelCell = document.createElement('td');
labelCell.innerHTML = '<b>Link: ' + i + '</b>';
var valueCell = document.createElement('td');
valueCell.innerHTML = links[i].description;
linksTable.appendChild(labelCell);
linksTable.appendChild(valueCell);
}
});
panorama.addListener('position_changed', function() {
var positionCell = document.getElementById('position-cell');
positionCell.firstChild.nodeValue = panorama.getPosition() + '';
});
panorama.addListener('pov_changed', function() {
var headingCell = document.getElementById('heading-cell');
var pitchCell = document.getElementById('pitch-cell');
headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
});
}
function changeHeading( delta ) {
heading = panorama.getPov().heading;
panorama.setPov({ heading: heading + delta });
}

Panorama is a local variable and not available to changeHeading() function.
Do two things:
Define var panorama = null; outside the functions as a global variable.
Remove var from "var panorama = new google.maps.StreetViewPanorama(..." so it does not create a new local variable and use the global one instead.

Two problems:
panorama is a local variable, so is not accessible in the button onclick function (which runs in the global scope). You can fix that by using the google.maps.event.addDomListener function in the scope that it is defined in.
When you set the POV you need to set it with a POV object (otherwise you will get javascript errors InvalidValueError: setPov: in property pitch: not a number)
(inside initMap):
google.maps.event.addDomListener(document.getElementById("left"),'click', function() {changeHeading(-5)});
google.maps.event.addDomListener(document.getElementById("right"),'click', function() {changeHeading(5)});
function changeHeading(delta) {
var heading = panorama.getPov().heading;
var POV = panorama.getPov();
POV.heading = heading + delta;
panorama.setPov(POV);
}
proof of concept fiddle
code snippet:
function initialize() {
var fenway = {
lat: 42.345573,
lng: -71.098326
};
var map = new google.maps.Map(document.getElementById('map'), {
center: fenway,
zoom: 14
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
panorama.addListener('pano_changed', function() {
var panoCell = document.getElementById('pano-cell');
panoCell.innerHTML = panorama.getPano();
});
panorama.addListener('links_changed', function() {
var linksTable = document.getElementById('links_table');
while (linksTable.hasChildNodes()) {
linksTable.removeChild(linksTable.lastChild);
}
var links = panorama.getLinks();
for (var i in links) {
var row = document.createElement('tr');
linksTable.appendChild(row);
var labelCell = document.createElement('td');
labelCell.innerHTML = '<b>Link: ' + i + '</b>';
var valueCell = document.createElement('td');
valueCell.innerHTML = links[i].description;
linksTable.appendChild(labelCell);
linksTable.appendChild(valueCell);
}
});
panorama.addListener('position_changed', function() {
var positionCell = document.getElementById('position-cell');
positionCell.firstChild.nodeValue = panorama.getPosition() + '';
});
panorama.addListener('pov_changed', function() {
var headingCell = document.getElementById('heading-cell');
var pitchCell = document.getElementById('pitch-cell');
headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
});
google.maps.event.addDomListener(document.getElementById("left"), 'click', function() {
changeHeading(-5)
});
google.maps.event.addDomListener(document.getElementById("right"), 'click', function() {
changeHeading(5)
});
function changeHeading(delta) {
var heading = panorama.getPov().heading;
var POV = panorama.getPov();
POV.heading = heading + delta;
panorama.setPov(POV);
}
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
float: left;
height: 50%;
width: 50%;
}
#pano {
width: 100%;
height: 50%;
}
#floating-panel {
float: right;
width: 50%;
height: 50%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map"></div>
<div id="floating-panel">
<table>
<tr>
<td><b>Position</b></td>
<td id="position-cell"> </td>
</tr>
<tr>
<td><b>POV Heading</b></td>
<td id="heading-cell">270</td>
</tr>
<tr>
<td><b>POV Pitch</b></td>
<td id="pitch-cell">0.0</td>
</tr>
<tr>
<td><b>Pano ID</b></td>
<td id="pano-cell"> </td>
</tr>
<tr>
<input type="button" id="left" value="Turn Left" onclick="changeHeading(-5);">
</tr>
<tr>
<input type="button" id="right" value="Turn Right" onclick="changeHeading(5);">
</tr>
<table id="links_table"></table>
</table>
</div>
<div id="pano"></div>

Uncaught TypeError: $(...).modal is not a function(…)

I have been following this question here bootstrap modal is not a function
and did try to put jQuery.noConflict(); in the code but still no luck.
Please help me if anybody faced a similar issue. I have included the whole code but the part to focus is this.Here is an image
enter image description here
google.maps.event.addListener(drawingManager, "overlaycomplete", function (event) {
overlayDragListener(event.overlay);
$('#vertices').val(event.overlay.getPath().getArray());
$('#myModal').modal('show');
$('#areaPolygon').val((0.000247105 * google.maps.geometry.spherical.computeArea(event.overlay.getPath())).toFixed(2));
$('#cropYear').val(new Date().getFullYear());
$.post('Producer.aspx.cs/GetCounty', { field1: $('#vertices').val },
function (returnedData) {
$('#countyselected').val(returnedData);
});
});
var map;
var drawingManager;
var shapes = [];
function initMap() {
var myLatlng = new google.maps.LatLng(51.51686166794058, 3.5945892333984375);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: false
}
var infoWindow = new google.maps.InfoWindow({
map: map
});
/*
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function () {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
*/
//Getting map DOM element
var mapElement = document.getElementById('map_canvas');
map = new google.maps.Map(map_canvas, mapOptions);
var iconWhite = {
url: "/WebContent/Images/WhiteFlag.JPG", // url
scaledSize: new google.maps.Size(35, 40), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
var iconRed = {
url: "/WebContent/Images/RedFlag.JPG", // url
scaledSize: new google.maps.Size(35, 40), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
title: 'Hello World!',
icon: iconRed
});
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['marker', 'polygon']
},
polygonOptions: {
editable: true,
draggable: true,
strokecolor: '#E9967A'
}
});
list = document.getElementsByTagName('SELECT')[0];
drawingManager.setMap(map);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(list);
google.maps.event.addDomListener(list, 'change', function() {
drawingManager.setOptions({
markerOptions: {
icon: this.value
}
})
});
google.maps.event.trigger(list, 'change', {})
var customControlDiv = document.createElement('div');
var customControl = new CustomControl(customControlDiv, map, 'red');
var customControlDiv1 = document.createElement('div');
var customControl1 = new CustomControl(customControlDiv1, map, 'green');
var customControlDiv2 = document.createElement('div');
var customControl2 = new CustomControl(customControlDiv2, map, 'teal');
var customControlDiv3 = document.createElement('div');
var customControl3 = new CustomControl(customControlDiv3, map, 'black');
var customControlDiv4 = document.createElement('div');
var customControl4 = new CustomControl(customControlDiv4, map, 'yellow');
var customControlWrapperMenu = document.getElementById('wrapperMenu');
var customSpaceDiv = document.getElementById('spaceDiv');
var bs = document.getElementById('bs-example-collapse-1');
customControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(customControlDiv);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(customControlDiv1);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(customControlDiv2);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(customControlDiv3);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(customControlDiv4);
map.controls[google.maps.ControlPosition.LEFT].push(customSpaceDiv);
map.controls[google.maps.ControlPosition.LEFT].push(customControlWrapperMenu);
// Add a listener for creating new shape event.
google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
var newShape = event.overlay;
newShape.type = event.type;
shapes.push(newShape);
if (drawingManager.getDrawingMode()) {
drawingManager.setDrawingMode(null);
}
});
// add a listener for the drawing mode change event, delete any existing polygons
google.maps.event.addListener(drawingManager, "drawingmode_changed", function() {
if (drawingManager.getDrawingMode() != null && drawingManager.getDrawingMode() != 'marker') {
for (var i = 0; i < shapes.length; i++) {
shapes[i].setMap(null);
}
shapes = [];
}
});
// Add a listener for the "drag" event.
google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
overlayDragListener(event.overlay);
$('#vertices').val(event.overlay.getPath().getArray());
$('#myModal').modal('show');
$('#areaPolygon').val((0.000247105 * google.maps.geometry.spherical.computeArea(event.overlay.getPath())).toFixed(2));
$('#cropYear').val(new Date().getFullYear());
$.post('Producer.aspx.cs/GetCounty', {
field1: $('#vertices').val
},
function(returnedData) {
$('#countyselected').val(returnedData);
});
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
function overlayDragListener(overlay) {
google.maps.event.addListener(overlay.getPath(), 'set_at', function(event) {
$('#vertices').val(overlay.getPath().getArray());
});
google.maps.event.addListener(overlay.getPath(), 'insert_at', function(event) {
$('#vertices').val(overlay.getPath().getArray());
});
}
function controlMarkerDiv() {
var controlUI2 = document.getElementById('areaMarker');
google.maps.event.addDomListener(controlUI2, 'click', function() {
var iconRed = {
url: "/WebContent/Images/RedFlag.JPG", // url
scaledSize: new google.maps.Size(35, 40), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
drawingManager.setOptions({
drawingControl: true,
icon: iconRed
});
});
}
function controlAreaRemover() {
var controlUI1 = document.getElementById('areaRemover');
google.maps.event.addListener(controlUI1, 'click', function() {
if (drawingManager.getDrawingMode() != null && drawingManager.getDrawingMode() != 'marker') {
for (var i = 0; i < shapes.length; i++) {
shapes[i].setMap(null);
}
shapes = [];
}
});
}
function controlFlagDiv() {
var controlUI = document.getElementById('trying');
// Setup the click event listeners
google.maps.event.addDomListener(controlUI, 'click', function() {
var iconRed = {
url: "/WebContent/Images/RedFlag.JPG", // url
scaledSize: new google.maps.Size(35, 40), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.marker);
});
}
function CustomdivMenuControl(controlDiv, map, flag) {
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '3px';
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to recenter the map';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Center Map';
controlUI.appendChild(controlText);
controlUI.addEventListener('click', function() {
$('#myModal').modal('show');
$('#areaPolygon').val((0.000247105 * google.maps.geometry.spherical.computeArea(event.overlay.getPath())).toFixed(2));
$('#cropYear').val(new Date().getFullYear());
});
}
function CustomControl(controlDiv, map, flag) {
// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#ffffff';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '1px';
controlUI.style.borderColor = '#ccc';
controlUI.style.height = '25px';
controlUI.style.width = '25px';
controlUI.style.marginTop = '5px';
controlUI.style.marginLeft = '-6px';
controlUI.style.paddingTop = '1px';
controlUI.style.cursor = 'flag';
controlUI.style.textAlign = 'center';
if (flag == 'red')
controlUI.style.backgroundImage = "url('/WebContent/Images/RedFlag.JPG')";
if (flag == 'green')
controlUI.style.backgroundImage = "url('/WebContent/Images/GreenFlag.JPG')";
if (flag == 'teal')
controlUI.style.backgroundImage = "url('/WebContent/Images/TealFlag.JPG')";
if (flag == 'black')
controlUI.style.backgroundImage = "url('/WebContent/Images/BlackFlag.JPG')";
if (flag == 'yellow')
controlUI.style.backgroundImage = "url('/WebContent/Images/YellowFlag.JPG')";
controlUI.style.backgroundSize = '20px';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
// Setup the click event listeners
google.maps.event.addDomListener(controlUI, 'click', function() {
var iconRed = {
url: "/WebContent/Images/RedFlag.JPG", // url
scaledSize: new google.maps.Size(35, 40), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
drawingManager.setOptions({
markerOptions: {
icon: iconRed
}
});
});
}
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Producer.aspx.cs" Inherits="WebContent_Producer" %>
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 70%;
}
</style>
<style type="text/css">
#map_canvas {
width: 400px;
height: 300px;
}
.contextmenu {
visibility: hidden;
background: #ffffff;
border: 1px solid #8888FF;
z-index: 10;
position: relative;
width: 140px;
}
.contextmenu div {
padding-left: 5px
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/Register.css">
<link rel="stylesheet" type="text/css" href="css/mapStyling.css">
<link href='css/custom.css' rel='stylesheet' type='text/css'>
<link href='css/registerCrop.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="../javascript/bootstrap.js"></script>
<script type="text/javascript" src="/WebContent/Javascript/map.js"></script>
<!-- Website Font style -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/landingPage.css">
</head>
<script>
$.get("header.html", function(data) {
$("#header").replaceWith(data);
});
$.get("RegisterCrop.aspx", function(data) {
$("#modalDiv").replaceWith(data);
});
</script>
<body>
<style>
#wrapper {
position: relative;
}
#SearchContainer {
position: absolute;
}
#map_canvas {
position: relative;
}
</style>
<!-- /.header -->
<div id="header">
</div>
<div id="spaceDiv" style="height:120px;width:50px;">
</div>
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class=" breadcrumb" id="wrapperMenu" style="padding-left:50px;height:150px;width:250px;">
<div class="row">
<button type="button" id="menuButton" class="bt btn-default checkbox-inline" data-toggle="collapse" data-target="#bs-example-collapse-1" aria-expanded="false" style="height:20px;width:50px;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse dropdown-collapse" id="bs-example-collapse-1">
<div class="row" id="areaMarker">
<button type="button" class="btn btn-default breadcrumb " style="padding-left:20px;">Mark Your Area</button>
</div>
<div class="row" id="areaRemover">
<button type="button" class="btn btn-default breadcrumb " style="padding-left:20px;">Remove Your Area</button>
</div>
<div class="row">
<div class="dropdown" id="flags">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span>
</button>
<select style="border:5px solid red">
<option value="http://maps.gstatic.com/mapfiles/markers2/markerA.png">A</option>
<option value="http://maps.gstatic.com/mapfiles/markers2/markerB.png">B</option>
<option value="http://maps.gstatic.com/mapfiles/markers2/markerC.png">C</option>
<option value="http://maps.gstatic.com/mapfiles/markers2/markerD.png">D</option>
<option value="http://maps.gstatic.com/mapfiles/markers2/markerE.png">E</option>
</select>
</div>
<button type="button" class="dropdown-submenu pull-right dropdown-toggle " data-toggle="dropdown"><span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right alert-warning">
<li>
<button type="button" id="redFlag" class="btn btn-default ">Set Flag Red</button>
</li>
<li>
<button type="button" id="yellowFlag" class="btn btn-default ">Set Flag Bright Yellow</button>
</li>
<li>
<button type="button" id="whiteFlag" class="btn btn-default ">Set Flag White</button>
</li>
<li>
<button type="button" id="tealFlag" class="btn btn-default ">Set Flag Teal</button>
</li>
<li>
<button type="button" id="greenFlag" class="btn btn-default ">Set Flag Bright Green</button>
</li>
<li>
<button type="button" id="blackFlag" class="btn btn-default ">Set Flag Black</button>
</li>
</ul>
</div>
</div>
</div>
<div id="wrapper" style="height:677px;width:1923px;top:53px">
<div id="modalDiv"></div>
<div id="map_canvas" style="height:677px;width:1903px;"></div>
<div id="SearchContainer" contextmenu="mc-static2mapcontainer panel ng-scope" style="height:50px;width:500px;position:absolute">
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<input id="Text1" class="controls" type="text" placeholder="Search Box">
</div>
</div>
<div id="footer">
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD7FTNE22Wl6S6DTQF83sTZTqbFFPzEkmU&libraries=drawing,places,geometry&callback=initMap">
google.maps.event.addDomListener(window, 'load', initMap);
</script>
<script>
$.get("footer.html", function(data) {
$("#footer").replaceWith(data);
});
</script>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Overlapping when multi poppers are appeared on the screen - javascript

Related

Bootstrap Datatables Javascript - Lengthmenu and export buttons too smooshed against each other - want to create line break between the two

How to make the infobox of a specific marker be opened by default after i click "show map" button ( similar to Airbnb)?

How to create graph from only one column of a HTML table in HighCharts?

Google Maps API -- adding simple buttons to turn left, turn right, etc

Uncaught TypeError: $(...).modal is not a function(…)

Categories

Resources