Google Maps

Contenedor para visualizar mapa

Se debe utilizar la siguiente clase para poder vizualizar el mapa usando el 100% del tamaño de su contenedor tanto para el ancho y alto, asi se podra vizualizar en todos los dispositivos.

  <GoogleMap class="map-container"></GoogleMap>
  

.map-container {
  z-index: 3;
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0px;
  border-width: 0px;
  margin: 0px;
  left: 0px;
  top: 0px;
  touch-action: pan-x pan-y;
}

Asignacion de colores a los botones de zoom del mapa

En la libreria implementada no se aprecia un background en los botones de zoom en el mapa, ya que existe un conflicto con las librerias implementadas, por lo cual es necesario esta reasignacion de background a color blanco. La clase ya existe dentro de la libreria por lo cual no es necesario ponerla en los elementos html.

.gm-control-active {
  background: $white !important;
}

Tamaño de contenedor para mapa con boton de pie

Utilizar la clase: map-whit-button para reservar un campo de 70px para un boton en la parte inferior del mapa.

  <GoogleMap class="map-container map-whit-button"></GoogleMap>
  

.map-whit-button {
  background: calc(100% - 70px);
}

Boton de GPS en mapa fixed bottom

Utilizar la clase: bottom-gps para subir de posicion al boton de gps en mapa para poder tener un boton mas arriba del por defecto de google maps.

.bottom-gps {
  bottom: 165px !important;
}

Botones de zoom en mapa mas arriba del bottom asigando por la libreria de google maps

La clase .gm-bundled-control esta siendo utilizada en este proyecto con el fin de sustituir el tamaño de posición de los botones del mapa

.gm-bundled-control {
  bottom: 150px !important;
}

Botón GPS con texto posicionado debajo de mapa y encima de footer modal

La clase .map-geolocation-button esta siendo utilizada en este proyecto con el fin de incrustar un botón extendido debajo del mapa y encima de los botones por defecto del modal

.map-geolocation-button {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

Marcador con animación

La siguientes clases están siendo utilizadas para dibujar un marcador personalizado centrado sobre el mapa con la capacidad de realizar una animación en el eje y cuando se mueve el mapa

.marker-container {
  bottom: 0px;
  height: 66px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -62%, 0);
  width: 35px;
  z-index: 0;
}
.marker-container .circle {
  width: 35px;
  height: 35px;
  position: relative;
  border-radius: 50%;
}
.marker-container .circle .header-container {
  position: absolute;
  top: 11px;
  left: 11px;
}
.marker-container .circle .header-container .period {
  background: #fff;
  height: 13px;
  width: 13px;
  border-radius: 50%;
}
.marker-container .stick {
  width: 5px;
  height: 20px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.marker-shadow {
  width: 5px;
  height: 3px;
  background: #000;
  position: absolute;
  bottom: 1px;
  border-radius: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.marker {
  position: relative;
  flex-direction: column;
  display: flex;
  align-items: center;
  z-index: 1;
  transition: all 300ms cubic-bezier(0.2, 0.8, 0.4, 1) 0s;
}
.marker-up {
  transform: translateY(10px);
}