I believe this is an easy problem, I am an unexperienced user though so please walk me through the steps a bit.
The maps JavaScript API has a documentation point called 'Geolocation: Displaying User or Device Position on Maps' which shows a map that has at the top a button that pans to the user location.
This feature is what I want to implement into my existing map.
Below is a minimal working html code snippet from the map I want to implement the location finder into. The API key has been replaced by three dots and there is a JavaScript configuration file linked on line 244.
I tried adding the js example code from the documentation above and below the initMap function as html, but since the bottom api url only refers to one initMap and replacing it renders the code unusable I am stuck.
Highly appreciated as I've been stuck on this for days!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Neighborhood Discovery</title>
<meta charset="UTF-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.neighborhood-discovery .map {
bottom: 0;
left: 20em;
position: absolute;
right: 0;
top: 0;
}
@media only screen and (max-width: 640px) {
.neighborhood-discovery .panel {
right: 0;
top: 50%;
width: unset;
}
}
</style>
<script>
'use strict';
function NeighborhoodDiscovery(configuration) {
const widget = this;
const widgetEl = document.querySelector('.neighborhood-discovery');
widget.center = configuration.mapOptions.center;
widget.places = configuration.pois || [];
// Initialize core functionalities -------------------------------------
initializeMap();
initializePlaceDetails();
initializeSidePanel();
/** Initializes the interactive map and adds place markers. */
function initializeMap() {
const mapOptions = configuration.mapOptions;
widget.mapBounds = new google.maps.Circle(
{center: widget.center, radius: configuration.mapRadius}).getBounds();
mapOptions.restriction = {latLngBounds: widget.mapBounds};
mapOptions.mapTypeControlOptions = {position: google.maps.ControlPosition.TOP_RIGHT};
widget.map = new google.maps.Map(widgetEl.querySelector('.map'), mapOptions);
widget.map.fitBounds(widget.mapBounds, /* padding= */ 0);
widget.map.addListener('click', (e) => {
// Check if user clicks on a POI pin from the base map.
if (e.placeId) {
e.stop();
widget.selectPlaceById(e.placeId);
}
});
widget.map.addListener('zoom_changed', () => {
});
const markerPath = widgetEl.querySelector('.marker-pin path').getAttribute('d');
const drawMarker = function(title, position, fillColor, strokeColor, labelText) {
return new google.maps.Marker({
title: title,
position: position,
map: widget.map,
icon: {
path: markerPath,
fillColor: fillColor,
fillOpacity: 1,
strokeColor: strokeColor,
anchor: new google.maps.Point(13, 35),
labelOrigin: new google.maps.Point(13, 13),
},
label: {
text: labelText,
color: 'white',
fontSize: '16px',
fontFamily: 'Material Icons',
},
});
};
// Add marker at the center location (if specified).
if (configuration.centerMarker && configuration.centerMarker.icon) {
drawMarker('Home', widget.center,
'#1A73E8', '#185ABC', configuration.centerMarker.icon);
}
}
}
</script>
<script src="dd-map-original.js"></script>
<script>
function initMap() {
new NeighborhoodDiscovery(CONFIGURATION);
}
</script>
</head>
<body>
<div class="neighborhood-discovery">
<div class="places-panel panel no-scroll">
<header class="navbar">
<div class="search-input">
<input class="place-search-input" placeholder="Search nearby places">
<button class="place-search-button">
<img src="https://fonts.gstatic.com/s/i/googlematerialicons/search/v11/24px.svg" alt="search"/>
</button>
</div>
</header>
<div class="results">
<ul class="place-results-list"></ul>
</div>
<button class="show-more-button sticky">
<span>Show More</span>
<img class="right" src="https://fonts.gstatic.com/s/i/googlematerialicons/expand_more/v11/24px.svg" alt="expand"/>
</button>
</div>
<div class="details-panel panel"></div>
<div class="map"></div>
<div class="photo-modal">
<img alt="place photo"/>
<div>
<button class="back-button">
<img class="icon" src="https://fonts.gstatic.com/s/i/googlematerialicons/arrow_back/v11/24px.svg" alt="back"/>
</button>
<div class="photo-text">
<div class="photo-place"></div>
<div class="photo-attrs">Photo by <span></span></div>
</div>
</div>
</div>
<svg class="marker-pin" xmlns="http://www.w3.org/2000/svg" width="26" height="38" fill="none">
<path d="M13 0C5.817 0 0 5.93 0 13.267c0 7.862 5.59 10.81 9.555 17.624C12.09 35.248 11.342 38 13 38c1.723 0 .975-2.817 3.445-7.043C20.085 24.503 26 21.162 26 13.267 26 5.93 20.183 0 13 0Z"/>
</svg>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=...&callback=initMap&libraries=places,geometry&solution_channel=GMP_QB_neighborhooddiscovery_v2_cABCDEF"
async defer
></script>
</body>
</html>
Below the referenced file that is called above in line 163 under the name dd-map-original.js
const DEPLOYMENT_METADATA = {
"deploymentName": "Don Det Neighborhood discovery"
};
const CONFIGURATION = {
"capabilities": {"search":true,"distances":true,"directions":true,"contacts":true,"atmospheres":true,"thumbnails":true},
"pois": [
{"placeId": "ChIJIdUeHHEPEzERgsbd0QPdEQY"},
{"placeId": "ChIJpxVa7woPEzERuLX4Y6Uzb-U"},
{"placeId": "ChIJCcbODv0OEzERHs_sVemgNRc"},
{"placeId": "ChIJrx9Xlv0OEzERwi4HoshmrWc"},
{"placeId": "ChIJWwp_RqkPEzERFVewiUEietQ"},
{"placeId": "ChIJVwQmEgAPEzERmzOLFomOpks"},
{"placeId": "ChIJ18hHSKoPEzERjQKYkVzUOvs"},
{"placeId": "ChIJR-ppXQIPEzERoV4XeKPUyag"},
{"placeId": "ChIJ65L-oP0OEzERirCqNlHATkM"},
{"placeId": "ChIJ131p7AsPEzERuHp4-iIypXU"},
{"placeId": "ChIJo3Ocl_0OEzERIo2o9IGH3BQ"},
{"placeId": "ChIJMQ12kqoPEzERu8zZDtXR5tY"},
{"placeId": "ChIJfWGOlP0OEzER8J_IubImk1I"},
{"placeId": "ChIJR4pYDv0OEzERBI46TaW7Wm4"},
{"placeId": "ChIJk4wWlP0OEzERWAUn6JcOkmg"},
{"placeId": "ChIJxZRtof4PEzER81N8YhSj1ac"},
{"placeId": "ChIJS30TBP4OEzERjTWYaVP5V5E"},
{"placeId": "ChIJv4YjHv4OEzER1sZ04izAmZ0"},
{"placeId": "ChIJW54ICv0OEzERysGzxuj_W1E"},
{"placeId": "ChIJu0IHCAYPEzERNDfVPCVTvCk"},
{"placeId": "ChIJA0y6fKcPEzERmXU8RGL3ZWk"},
{"placeId": "ChIJBXxfsqsPEzERkJCu9zoGqIg"},
{"placeId": "ChIJ4V_zfuIPEzERpVRTKWsJvqw"},
{"placeId": "ChIJsbwql_0OEzERo-8MgtyDeDU"},
{"placeId": "ChIJdV7ATAEPEzERzsg22bc4SyE"},
{"placeId": "ChIJjw8FUKYPEzERBR6SuW4TiL4"},
{"placeId": "ChIJFwCTjocPEzERtM6YkydFHJg"},
{"placeId": "ChIJLdNJ-vMPEzERDbi7v1oGe0k"},
{"placeId": "ChIJe9YJpaAPEzERvw4n_28j4FI"},
{"placeId": "ChIJY1rsBv4OEzERCpPaP5NP5-E"},
{"placeId": "ChIJR9FagAYPEzERmzcz9AHNevk"},
{"placeId": "ChIJW-j0pKgPEzERobkQRbGqf1A"},
{"placeId": "ChIJZWi5ov0OEzERmQAtxv0cwtE"},
{"placeId": "ChIJ09SQ3wUPEzERS64RerNmQFE"},
{"placeId": "ChIJf1qfVqoPEzERWJcpE5W6XMM"},
{"placeId": "ChIJHybcWAoPEzERM_nR6Jl1vzo"},
{"placeId": "ChIJO3x-Cv0OEzER3DFbUke2Nz8"},
{"placeId": "ChIJQUnggv0OEzERODAepa2qZbo"},
{"placeId": "ChIJ6yyuXAIPEzER5SOkdbSYD5w"},
{"placeId": "ChIJ_1D1i6APEzERkCtnNpt9SiA"},
{"placeId": "ChIJ_-AO1wEPEzERVLItx48j4eg"},
{"placeId": "ChIJgQO4fAIPEzERrgV9XIDdC-o"},
{"placeId": "ChIJTVrK2AEPEzERlE8YEsyAkFE"},
{"placeId": "ChIJP3Dxov0OEzERgXr6f4i5fO8"},
{"placeId": "ChIJmYT0u58PEzERJvGiZ0YxtrI"},
{"placeId": "ChIJA23zlQkPEzER2CWDVXfYtNU"},
{"placeId": "ChIJkbMqXHMPEzERmbjIsKMBYWQ"},
{"placeId": "ChIJI42khP0OEzERlzqgPPeT6d8"},
{"placeId": "ChIJxfENiB8PEzERa1-NfzXFZnA"},
{"placeId": "ChIJ9wBEDv0OEzERGZdO98yN204"},
{"placeId": "ChIJFba89awPEzER6oTnWOAxm6A"},
{"placeId": "ChIJfbcnbP0OEzERZrGQGSJg0hI"},
{"placeId": "ChIJb8Gbcf0OEzERpghXlBN8xGM"},
{"placeId": "ChIJHwSfmM0PEzEROGGN0yfgSCE"},
{"placeId": "ChIJS68ewtoPEzERM56y-Ko8eBI"},
{"placeId": "ChIJS3MYXQoPEzERpqUDjcbypnA"},
{"placeId": "ChIJdUXfYo8PEzERJLxdt0J5xAA"},
{"placeId": "ChIJsdXJ7_0OEzERdNCZdkWV5do"},
{"placeId": "ChIJM9I7cf0OEzERyE04b6va1-w"},
{"placeId": "ChIJKw2H0L0PEzERVIKQ1vrUUO0"},
{"placeId": "ChIJP1JYFvcPEzERsRwNlephfco"},
{"placeId": "ChIJAaukzP0PEzER4u7eGODCZV0"},
{"placeId": "ChIJoRDKgv0OEzERwYBcmETRLuw"},
{"placeId": "ChIJffafpIEPEzERFhQkclVswHs"},
{"placeId": "ChIJDcMucugPEzERmPDoen_sycM"},
{"placeId": "ChIJRaABnfUOEzERWwhWxbjyj5I"},
{"placeId": "ChIJh_zhmqoPEzER5e5DqpVS8vA"},
{"placeId": "ChIJXWdTK1oPEzERUWNzM-VlNZQ"},
{"placeId": "ChIJlR9YFgAPEzERHZ-G-cdXqCw"},
{"placeId": "ChIJjbGHhP0OEzERnC-jf3SQwvA"},
{"placeId": "ChIJlfP4VEYPEzERyu5-G7ssiMs"},
{"placeId": "ChIJ0R7ek-gPEzERjLn78LnMgDU"},
{"placeId": "ChIJKSOJHG0PEzERAGPvgVx96c4"},
{"placeId": "ChIJG6HjnHEPEzERizNGXkvtr5U"},
{"placeId": "ChIJF_zVgv0OEzERO24KdBQkIDU"},
{"placeId": "ChIJCyKRuAoPEzERZbnB__safz0"},
{"placeId": "ChIJ5yOPJycPEzERQiiwW4kVHN8"},
{"placeId": "ChIJg4ZvMnsPEzERy9IpNuAeraU"},
{"placeId": "ChIJOVKDof0OEzERh-_u1JLLUZI"},
{"placeId": "ChIJqQksmP0OEzERCruNbmz6SEs"},
{"placeId": "ChIJHyLMNGIPEzER1lO5c35rwt8"},
{"placeId": "ChIJfbcnbP0OEzERZEAh8UPUJh0"},
{"placeId": "ChIJS6dRZOIPEzERPEgfSumvYtM"},
{"placeId": "ChIJRX4X5d0PEzERDgiaVl2mcfo"},
{"placeId": "ChIJ_____wYPEzERg6FW-a92UeU"},
{"placeId": "ChIJfZqGRtYPEzERPcORI4AAyPU"},
{"placeId": "ChIJY7_1SBUPEzERPTO_4XUs1IM"}
],
"centerMarker": {"icon":"circle"},
"mapRadius": 4000,
"mapOptions": {"center":{"lat":13.975873,"lng":105.9200531},"fullscreenControl":true,"mapTypeControl":true,"streetViewControl":false,"zoom":16,"zoomControl":true,"maxZoom":20,"mapId":""},
"mapsApiKey": "..."
};