I am rebuilding a webpage and want to use some of the graphic images in the second row of this page (code below) on the first row. I can't figure out how to do that. I tried <tr> and <td> to no avail. I've researched a course I am studying on-line and have searched the internet and tried this that and the other thing. Any help will be greatly appreciated!
<!DOCTYPE html>
<!--
@license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<html>
<head>
<title>Geocoding Service</title>
<script>
var lattitude = "";
var longitude = "";
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
let map;
let marker;
let geocoder;
let responseDiv;
let response;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: { lat: 44.630978, lng: -86.072480 },
mapTypeControl: false,
});
geocoder = new google.maps.Geocoder();
const inputText = document.createElement("input");
inputText.type = "text";
inputText.placeholder = "Enter a location";
const submitButton = document.createElement("input");
submitButton.type = "button";
submitButton.value = "Geocode";
submitButton.classList.add("button", "button-primary");
const clearButton = document.createElement("input");
clearButton.type = "button";
clearButton.value = "Clear";
clearButton.classList.add("button", "button-secondary");
response = document.createElement("pre");
response.id = "response";
response.innerText = "";
responseDiv = document.createElement("div");
responseDiv.id = "response-container";
//responseDiv.appendChild(response);
const instructionsElement = document.createElement("p");
instructionsElement.id = "instructions";
instructionsElement.innerHTML =
"<strong>Instructions</strong>: Enter an address (or City and State) in the textbox and click Geocode or click on the map to fetch data from the closest National Weather Service office!";
map.controls[google.maps.ControlPosition.TOP_LEFT].push(inputText);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(submitButton);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(clearButton);
map.controls[google.maps.ControlPosition.LEFT_TOP].push(
instructionsElement
);
map.controls[google.maps.ControlPosition.LEFT_TOP].push(responseDiv);
marker = new google.maps.Marker({
map,
});
map.addListener("click", (e) => {
geocode({ location: e.latLng });
});
submitButton.addEventListener("click", () =>
geocode({ address: inputText.value })
);
clearButton.addEventListener("click", () => {
clear();
});
clear();
}
function clear() {
marker.setMap(null);
}
function geocode(request) {
clear();
geocoder
.geocode(request)
.then((result) => {
const { results } = result;
map.setCenter(results[0].geometry.location);
marker.setPosition(results[0].geometry.location);
marker.setMap(map);
response.innerText = JSON.stringify(result, null, 2);
if (results.length > 0) {
const location = results[0].geometry.location;
lat = location.lat(); // Get latitude
lng = location.lng(); // Get longitude
// Update the map and marker
map.setCenter(location);
marker.setPosition(location);
marker.setMap(map);
// Log the lat and lng for further processing
console.log("Latitude:", lat);
console.log("Longitude:", lng);
// Use lat and lng for other processing
//alert(`Latitude: ${lat}, Longitude: ${lng}`);
lattitude = lat;
longitude = lng;
// report_it();
} else {
alert("No results found!");
}
return results;
})
.catch((e) => {
alert("Geocode was not successful for the following reason: " + e);
});
console.log("response =");
console.log(response);
}
window.initMap = initMap;
</script>
<style>
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
/**
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 50%;
width: 25%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
input[type="text"] {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
line-height: 40px;
margin-right: 0;
min-width: 25%;
}
input[type="button"] {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
height: 40px;
cursor: pointer;
margin-left: 5px;
}
input[type="button"]:hover {
background: rgb(235, 235, 235);
}
input[type="button"].button-primary {
background-color: #1a73e8;
color: white;
}
input[type="button"].button-primary:hover {
background-color: #1765cc;
}
input[type="button"].button-secondary {
background-color: white;
color: #1a73e8;
}
input[type="button"].button-secondary:hover {
background-color: #d2e3fc;
}
/* #response-container {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
overflow: auto;
max-height: 50%;
max-width: 90%;
background-color: rgba(255, 255, 255, 0.95);
font-size: small;
} */
#instructions {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
padding: 1rem;
font-size: medium;
}
</style>
</head>
<body>
<table>
<tr>
<div id="charts">;
<td>
<!-- <script src="final_NWS.js"></script>; -->
<div id="profile">
temperatureString;
</div>
</td>
<! -- National weather radar -->
<td>
<iframe src="https://radar.weather.gov/ridge/standard/CONUS_loop.gif" width="420" height="300">
<p>Problem loading the web page</p>
</iframe>
</td>
<! -- Regional weather radar -->
<td>
<font color="#0000ee"><img src="http://sirocco.accuweather.com/sat_mosaic_640x480_public/rs/isarmi_.gif" alt="" width="360" hspace="10" height="328" vspace="1" border="1">
</font>
</td>
<! -- Lightning Map -->
<td>
<iframe src="https://images.lightningmaps.org/blitzortung/america/index.php?map=north_middle_america" width="650" frameborder="0" height="450"></iframe>
</td>
</div>
</tr>
<tr>
<! -- Clickable Google Map and Input Boxes -->
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/ap...&solution_channel=GMP_CCS_geocodingservice_v2"
defer>
</script>
</div>
</tr>
</table>
<script>
// Get the div element
const divElement = document.getElementById("charts");
// Make the div invisible
// divElement.style.display = "none";
// To make it visible again
//divElement.style.display = "block"; // Or "inline", "inline-block", etc. depending on your needs
</script>
</body>
</html>
<!DOCTYPE html>
<!--
@license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<html>
<head>
<title>Geocoding Service</title>
<script>
var lattitude = "";
var longitude = "";
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
let map;
let marker;
let geocoder;
let responseDiv;
let response;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: { lat: 44.630978, lng: -86.072480 },
mapTypeControl: false,
});
geocoder = new google.maps.Geocoder();
const inputText = document.createElement("input");
inputText.type = "text";
inputText.placeholder = "Enter a location";
const submitButton = document.createElement("input");
submitButton.type = "button";
submitButton.value = "Geocode";
submitButton.classList.add("button", "button-primary");
const clearButton = document.createElement("input");
clearButton.type = "button";
clearButton.value = "Clear";
clearButton.classList.add("button", "button-secondary");
response = document.createElement("pre");
response.id = "response";
response.innerText = "";
responseDiv = document.createElement("div");
responseDiv.id = "response-container";
//responseDiv.appendChild(response);
const instructionsElement = document.createElement("p");
instructionsElement.id = "instructions";
instructionsElement.innerHTML =
"<strong>Instructions</strong>: Enter an address (or City and State) in the textbox and click Geocode or click on the map to fetch data from the closest National Weather Service office!";
map.controls[google.maps.ControlPosition.TOP_LEFT].push(inputText);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(submitButton);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(clearButton);
map.controls[google.maps.ControlPosition.LEFT_TOP].push(
instructionsElement
);
map.controls[google.maps.ControlPosition.LEFT_TOP].push(responseDiv);
marker = new google.maps.Marker({
map,
});
map.addListener("click", (e) => {
geocode({ location: e.latLng });
});
submitButton.addEventListener("click", () =>
geocode({ address: inputText.value })
);
clearButton.addEventListener("click", () => {
clear();
});
clear();
}
function clear() {
marker.setMap(null);
}
function geocode(request) {
clear();
geocoder
.geocode(request)
.then((result) => {
const { results } = result;
map.setCenter(results[0].geometry.location);
marker.setPosition(results[0].geometry.location);
marker.setMap(map);
response.innerText = JSON.stringify(result, null, 2);
if (results.length > 0) {
const location = results[0].geometry.location;
lat = location.lat(); // Get latitude
lng = location.lng(); // Get longitude
// Update the map and marker
map.setCenter(location);
marker.setPosition(location);
marker.setMap(map);
// Log the lat and lng for further processing
console.log("Latitude:", lat);
console.log("Longitude:", lng);
// Use lat and lng for other processing
//alert(`Latitude: ${lat}, Longitude: ${lng}`);
lattitude = lat;
longitude = lng;
// report_it();
} else {
alert("No results found!");
}
return results;
})
.catch((e) => {
alert("Geocode was not successful for the following reason: " + e);
});
console.log("response =");
console.log(response);
}
window.initMap = initMap;
</script>
<style>
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
/**
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 50%;
width: 25%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
input[type="text"] {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
line-height: 40px;
margin-right: 0;
min-width: 25%;
}
input[type="button"] {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
height: 40px;
cursor: pointer;
margin-left: 5px;
}
input[type="button"]:hover {
background: rgb(235, 235, 235);
}
input[type="button"].button-primary {
background-color: #1a73e8;
color: white;
}
input[type="button"].button-primary:hover {
background-color: #1765cc;
}
input[type="button"].button-secondary {
background-color: white;
color: #1a73e8;
}
input[type="button"].button-secondary:hover {
background-color: #d2e3fc;
}
/* #response-container {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
overflow: auto;
max-height: 50%;
max-width: 90%;
background-color: rgba(255, 255, 255, 0.95);
font-size: small;
} */
#instructions {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
padding: 1rem;
font-size: medium;
}
</style>
</head>
<body>
<table>
<tr>
<div id="charts">;
<td>
<!-- <script src="final_NWS.js"></script>; -->
<div id="profile">
temperatureString;
</div>
</td>
<! -- National weather radar -->
<td>
<iframe src="https://radar.weather.gov/ridge/standard/CONUS_loop.gif" width="420" height="300">
<p>Problem loading the web page</p>
</iframe>
</td>
<! -- Regional weather radar -->
<td>
<font color="#0000ee"><img src="http://sirocco.accuweather.com/sat_mosaic_640x480_public/rs/isarmi_.gif" alt="" width="360" hspace="10" height="328" vspace="1" border="1">
</font>
</td>
<! -- Lightning Map -->
<td>
<iframe src="https://images.lightningmaps.org/blitzortung/america/index.php?map=north_middle_america" width="650" frameborder="0" height="450"></iframe>
</td>
</div>
</tr>
<tr>
<! -- Clickable Google Map and Input Boxes -->
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/ap...&solution_channel=GMP_CCS_geocodingservice_v2"
defer>
</script>
</div>
</tr>
</table>
<script>
// Get the div element
const divElement = document.getElementById("charts");
// Make the div invisible
// divElement.style.display = "none";
// To make it visible again
//divElement.style.display = "block"; // Or "inline", "inline-block", etc. depending on your needs
</script>
</body>
</html>
