Solution 1 :

You could create a custom MapControl class like the following, found on github

<MapControl map={this.map || null}
    controlPosition={this.maps ? this.maps.ControlPosition.TOP_LEFT : null}
>
    <YourControlButtonComponentHere />
</MapControl>
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { render } from 'react-dom'

class MapControl extends Component {
  static propTypes = {
    controlPosition: PropTypes.number,
  }

  shouldComponentUpdate(nextProps, nextState) {
    return !this.props.map && nextProps.map
  }

  componentDidMount() {
    this._render()
  }

  componentDidUpdate(prevProps, prevState) {
    this._render()
  }

  componentWillUnmount() {
        const { props } = this
    if (!props.map) return
        const index = props.map.controls[props.controlPosition].getArray().indexOf(this.el)
        props.map.controls[props.controlPosition].removeAt(index)
    }

  _render() {
    const { props } = this
    if (!props.map || !props.controlPosition) return
    render(
      <div ref={el => {
        if (!this.renderedOnce) {
          this.el = el
          props.map.controls[props.controlPosition].push(el)
        } else if (el && this.el && el !== this.el) {
          this.el.innerHTML = '';
          [].slice.call(el.childNodes).forEach(child => this.el.appendChild(child))
        }
        this.renderedOnce = true
      }}>
        {props.children}
      </div>,
      document.createElement('div')
    )
  }

  render() {
    return <noscript/>
  }
}

export default MapControl

Problem :

I just finished to set a small user interface containing:

1) dropdown menus

2) 1 button

3) 1 progress-bar

As shown in the image below:

map1

The problem I have is that when I drag the map, for example, to see what is on the right, all the components listed are moving together with the map. But I want them to be fixed while moving the cursor.

As soon as I release the mouse click, the components go back to the original position.

See the problem below during dragging the map:

drag

Below the snippet of GoogleMap.js:

import React from 'react';
import styled from 'styled-components';
import GoogleMapReact from 'google-map-react';

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;
    }
`;

const BoatMap = () => (
    <div className="google-map">
        <GoogleMapReact
            bootstrapURLKeys={{ key: 'My_KEY' }}
            center={{
                lat: 42.4,
                lng: -71.1
            }}
            zoom={11}
        >

            <select className="combo-A">
                <option>All</option>
                <option>Marker-A</option>
                <option>Marker-B</option>
            </select>
            <div class="progress-circle p0">
                <span>0%</span>
                <div class="left-half-clipper">
                    <div class="first50-bar" />
                    <div class="value-bar" />
                </div>
            </div>
            <button className="btn-next-request" onClick="">
                Time to Next API Request
            </button>
        </GoogleMapReact>
    </div>
);

Below the snippet of GoogleMap.css. For this file I am including only one component as the others are structured similarly:

.combo-A {
    position: fixed;
    height: 34px;
    font-size: 16px;
    border-radius: 3px;
    left: 15px;
    top: 15px;
    margin-right: 500px;
    width: 200px;
    margin: -40vh 50vw auto -50vh;
    background: var(--offWhite);
    padding: 0.1rem 0.9rem;
    border: 3px solid var(--shadowGreen);
    color: var(--primaryGreen);
    font-weight: bold;
}

What I have done so far:

1) I consulted the following source and it seems that if a components has to be fixed, the best approach would be to use position: sticky however the result was not the one expected as shown below:

sticky

2) If I change from position: fixed; to position: absolute; nothing changes.

3) If I change from position: fixed; to position: relative; I get the same result as point 1)

4) The last thing I tried was changing the position of the map on the GoogleMap.js file as fixed as explained below:

.google-map {
    background: #424242;
    grid-area: google-map;
    position: fixed;
    height: 100%;
    width: 100%;
}

That also didn’t cause any changes.

I am not sure at this point what the error could be in order to keep all the components fixed in their position during paning or dragging on the map.

Comments

Comment posted by h0merr

try doing it as a nav maybe (?) without background, that way maybe they stay fixed

Comment posted by Emanuele

@h0merr, thanks for reading the question. I think your suggestion is great but since this is an exercise to embed controls on a google-map I would like to stick with that for now 🙂

By

Leave a Reply

Your email address will not be published. Required fields are marked *