I've been attempting to place a dropdown menu at a specific location on my Google Map, specifically in the top right (or top left is also acceptable).
Below is the current output I am seeing:
Here is the expected result:
Modifications
After trying margin-top: 100px;, the dropdown will move down. However, if I input margin-bottom: 500px;, the dropdown remains centered (where the origin is located).
The same applies when using margin-left: 500px; to move the dropdown to the right, but using margin-right: 500px; does not allow the dropdown to move past the origin.
It appears that only downward and leftward movements are permitted, not upward and rightward.
See screenshots below:
The code snippet I am currently utilizing is as follows:
GoogleMap.js
import React from 'react';
import styled from 'styled-components';
import GoogleMapReact from 'google-map-react';
import { Card, CardImg, CardText, CardBody, CardTitle, /*CardSubtitle,*/ Button } from 'reactstrap';
import ShipTracker from '../components/ShipTracker';
const MapContainer = styled.div`
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 200px;
grid-gap: 10px;
height: 100vh;
grid-template-areas: "google-map sidebar" "ship-tracker sidebar";
.google-map {
background: #424242;
grid-area: google-map;
position: relative;
height: 100%;
width: 100%;
}
.map-sidebar {
background: #9dc183;
grid-area: sidebar;
}
.ship-tracker {
grid-area: ship-tracker;
}
`;
var expanded = false;
function showCheckboxes() {
// Function to show checkboxes
}
const BoatMap = () => (
<div className="google-map">
<GoogleMapReact
bootstrapURLKeys={{ key: 'My_KEY' }}
center={{
lat: 42.4,
lng: -71.1
}}
zoom={11}
>
{/* Insert components here */}
<form>
<div class="multiselect">
<div class="combo-companies" onClick={showCheckboxes}>
<select>
<option>Select an option</option>
</select>
<div class="overSelect" />
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="CD" />Marker-1
</label>
<label for="two">
<input type="checkbox" id="DJ" />Marker-2
</label>
<label for="three">
<input type="checkbox" id="DT" />Marker-3
</label>
</div>
</div>
</form>
</GoogleMapReact>
</div>
);
GoogleMap.css
.combo-companies {
position: absolute;
height: 34px;
width: 10%;
font-size: 16px;
border: 1px solid #111;
border-radius: 3px;
left: 15px;
top: 15px;
z-index: 2000;
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
Steps Taken So Far:
1) Implemented CSS Grid Layout to define the positioning of the Google Map. Verified the layout based on documentation references to ensure correctness.
2) A potential issue might stem from the use of relative and absolute parameters on the components, as discussed in posts like this one and this.
Although informative, the problem could not be pinpointed.
3) Progress has been made towards finding a solution, with additional insight gained from a helpful post such as this one. Unfortunately, the solution remained elusive.
Appreciate any guidance provided on resolving this issue.