Create Google map page to show custom location in UI page

AlexGrischenk0
Tera Contributor

‎05-14-2024 10:03 AM - edited ‎05-14-2024 10:04 AM

Hello! I'm trying to create UI page with Google map to show, for example, custom location provided by Scripted API. 
And i'm stuck. Could somebody explain how to convert simple HTML code with this map with marker into UI page? 

This is HTML web page 

<!DOCTYPE html>
<html>
<head>
<title>Google Maps Example</title>
<style>
#map {
height: 90%;
width: 90%;
 
}
html, body {
height: 100%;
margin: 5;
padding: 5;
 
}
</style>
</head>
<body>
<div id="map"></div>

<script>
let map;
let marker;

function initMap() {
const initialCoords = { lat: 40.7128, lng: -74.0060 };

map = new google.maps.Map(document.getElementById('map'), {
center: initialCoords,
zoom: 8
});

marker = new google.maps.Marker({
position: initialCoords,
map: map,
title: 'Iphone 15'
});

const infoWindow = new google.maps.InfoWindow({
content: 'Iphone 15'
});

marker.addListener('mouseover', function() {
infoWindow.open(map, marker);
});
 
marker.addListener('mouseout', function() {
infoWindow.close();
});
}

function updateMarker(lat, lng) {
const newCoords = { lat: lat, lng: lng };
marker.setPosition(newCoords);
map.setCenter(newCoords);
}
</script>
</body>
</html>
Thank you in advance!
0 Helpfuls
  • 536 Views
4 REPLIES 4

AlexGrischenk0
Tera Contributor
In response to Amit Pandey

‎05-14-2024 10:11 AM

So as I understand correctly it is better to use Map pages for this case?

0 Helpfuls

Amit Pandey
Kilo Sage
In response to AlexGrischenk0

‎05-14-2024 10:20 AM

Yes, but I had similar requirement and had to choose UI Action.

AlexGrischenk0
Tera Contributor
In response to Amit Pandey

‎05-14-2024 10:28 AM

Thank you. I'll take a look

0 Helpfuls