let map;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
map = new Map(document.getElementById("map"), {
center: { lat: 60.3690453554567, lng: 5.350072840196482 },
zoom: 15,
mapId: "e1b5c8f5a7e3b6e",
});
marker = new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: 60.3690453554567, lng: 5.350072840196482 },
});
}
initMap();
* {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
max-width: 960px;
margin: 0 auto;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 15px 20px;
}
.navbar-links-container {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar-link a {
color: white;
text-decoration: none;
font-size: 1rem;
padding: 8px 12px;
transition: background-color 0.3s ease;
}
.navbar-link a:hover {
background-color: #575757;
border-radius: 4px;
}
.navbar-hamburgerMenu {
color: white;
}
#map {
height: 500px;
width: 40%;
margin: 0px;
padding: 20px;
position: relative;
top: -100px;
left: 0px;
align-items: center;
}
h2 {
display: flex;
font-family: Arial, sans-serif;
font-size: 30px;
font-weight: bold;
color: #000;
margin: 0 0 10px 0;
position: relative;
top: -100px;
left: 0px;
align-items: center;
text-align: center;
}
h1 {
display: flex;
font-family: Arial, sans-serif;
font-size: 30px;
font-weight: bold;
color: #000;
margin: 0 0 10px 0;
position: relative;
top: 220px;
left: 600px;
text-align: center;
}
.ul_kontakt li {
display: flex;
list-style-type: none;
list-style-position: inside;
line-height: 1.5;
font-size: 20px;
position: relative;
top: 200px;
left: 600px;
text-align: center;
}
.div_kontakt {
position: relative;
justify-content: center;
float: right;
text-align: center;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
HVLTopia Kontakt oss
</title>
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "AIzaSyDMSf58ogqi6b-SYOZiuQ-a6PuQDXRrtY4",
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<link rel="stylesheet" href="kontakt.css">
<body>
<nav class="navbar">
<ul class="navbar-links-container">
<li class="navbar-link"><a href="#home">Home</a></li>
<li class="navbar-link"><a href="#news">Status</a></li>
<li class="navbar-link"><a href="#contact">Info</a></li>
<li class="navbar-link"><a href="#about">Contact</a></li>
</ul>
<svg
class="navbar-hamburgerMenu"
width="40"
height="28"
viewBox="0 0 40 28"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 14H38M2 2H38M2 26H38"
stroke="white"
stroke-width="4"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</nav>
<div class="kontakt">
<h1>
Kontakt Info:
</h1>
<ul class="ul_kontakt">
<li>
Telefon: +47 123 45 678
</li>
<li>
Besøksadresse: 5003 Bergen
</li>
<li>
Fax: +47 123 45 678
</li>
<li>
Epostadresse: [email protected]
</li>
</ul>
</div>
<h2>
Finn oss her:
</h2>
<div id="map">
<script src="kontakt.js"></script>
</div>
</body>
</html>
