An URL that automatically collapse the sidebar?

2018-10-11 18:57 Lehs imported from Stackoverflow

When applying the URL

https://www.google.com/maps/@17.7461215,-62.3775194,187431m/data=!3m1!1e3

a satellite map over some Caribbean islands appears with a sidebar. Is it possible to construct an URL that open the same view without a sidebar?

What does

data=!3m1!1e3

in the URL stand for? How can I get information about such questions?

See also questions close to this topic

Mongodb to Agm-maps

I am trying to connect my mongodb database to my agm map. However, it says that there is no dataSource module in the agm-map package. Does anyone know what the proper module is to use to do this?

<!-- Here is the issue -->
<agm-map [latitude] = "markerLat" [longitude]="markerLng" 
         [zoom]="zoom" [dataSource]="events">


    <agm-marker *ngFor = "let event of events;let i = index"
    (markerClick) = "clickedMarker(event, i)"
    [latitude] = "event.eventLat"
    [longitude] = "event.eventLng">

    </agm-marker>
</agm-map>

React this.SetState is undefined - nested function

Making my first react app. I want to update the google maps api based on the user's location. I am receiving the error "this is undefined". I understand using .bind(this) and wrapping in an arrow function but think this case is a bit different because I am setting state inside a nested function:

constructor(props) {
    super(props);
    
    this.state = {zip: null, lat: 40.5304 , lng: -100.6534 , zoom: 3.8 };

    this.updateCurrentPosition= this.updateCurrentPosition.bind(this);
  }
  
  //...
  
updateCurrentPosition = () => {
    navigator.geolocation.getCurrentPosition(success, error);
    
      function success(pos) {
        this.setState(`{lat: ${pos.coords.latitude}, lng: ${pos.coords.longitude}, zoom: ${3.8}`)  
      }
    
      function error(err) {
        console.warn(`ERROR(${err.code}): ${err.message}`);
      }; 
  }

  ops = () => { 
    return {
      center: { lat: this.state.lat, lng: this.state.lng },
      zoom: this.state.zoom
    }
  };

how to drop markers in google maps react , i already have it in normal javascript, but need it in react

this is my vanilla javascript, it drops files perfectly, similar to this example https://developers.google.com/maps/documentation/javascript/examples/marker-animations-iteration

but i have a react project now, how would i to converting it ?

Map.js

/* global google */

import React, { Component } from "react";
import { Map, GoogleApiWrapper, InfoWindow, Marker } from "google-maps-react";
import { data } from "./Markers";
const mapStyles = {
  width: "45%",
  height: "54%"
};
const h4style = {
  color: "black",
  position: "center"
};
export class MapContainer extends Component {
  state = {
    showingInfoWindow: false, //Hides or the shows the infoWindow
    activeMarker: {}, //Shows the active marker upon click
    selectedPlace: {} //Shows the infoWindow to the selected place upon a marker
  };

  onMarkerClick = (props, marker, e) =>
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true
    });

  onClose = props => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null
      });
    }
  };
  render() {
    return (
      <Map
        google={this.props.google}
        zoom={13}
        style={{}}
        scrollwheel={true}
        initialCenter={{
          lat: 32.71573699,
          lng: -117.16108799
        }}
      >
        {//curly brace here lets you write javscript in JSX
        data.map(item => (
          <Marker
            onClick={this.onMarkerClick}
            key={item.id}
            title={item.name}
            name={item.name}
            position={{ lat: item.lat, lng: item.lng }}
            date={item.date}
          />
        ))}

        <InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}
          onClose={this.onClose}
        >
          <div>
            <h4 style={h4style}>{this.state.selectedPlace.name}</h4>
            <h4 style={h4style}>{this.state.selectedPlace.date}</h4>
          </div>
        </InfoWindow>
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: ""
})(MapContainer);

and this is my where i get my data from if it matters

Markers.js


export const data = [
  {
    name: "crime",
    title: "gun",
    lat: 32.71248,
    lng: -117.16769,
    id: 1,
    date: "04/12/2016"
  },
  {
    name: "crime",
    title: "crime",
    lat: 32.702163,
    lng: -117.151572,
    id: 2,
    date: "04/12/2016"
  },
  {
    name: "crime",
    title: "Perth",
    lat: 32.716193,
    lng: -117.167414,
    id: 3,
    date: "04/12/2016"
  },
  {
    name: "crime",
    title: "crime",
    lat: 32.712494,
    lng: -117.164703,
    id: 3,
    date: "04/12/2016"
  },

  {
    name: "crime",
    title: "Sydney",
    lat: 32.686901,
    lng: -117.176141,
    id: 1,
    date: "04/12/2016"
  },
  {
    name: "crime",
    title: "Melbourne",
    lat: 32.690682,
    lng: -117.182634,
    id: 2,
    date: "04/12/2016"
  },
  {
    name: "crime",
    title: "crime",
    lat: 32.712848,
    lng: -117.247632,
    id: 3,
    date: "04/12/2016"
  },
  {
    name: "crime",
    title: "crime",
    lat: 32.712494,
    lng: -117.164703,
    id: 3,
    date: "04/12/2016"
  },
  {
    name: "crime",
    title: "Sydney",
    lat: 32.686901,
    lng: -117.176141,
    id: 1
  },
  {
    name: "crime",
    title: "Melbourne",
    lat: 32.690682,
    lng: -117.182634,
    id: 2,
    date: "04/12/2016"
  },
  {
    name: "crime",
    title: "crime",
    lat: 32.712848,
    lng: -117.247632,
    id: 3,
    date: "04/12/2016"
  },
  {
    name: "crime",
    title: "crime",
    lat: 32.712494,
    lng: -117.164703,
    id: 3,
    date: "04/12/2016"
  },

  {
    name: "crime",
    title: "Sydney",
    lat: 32.72937,
    lng: -117.233911,

    id: 1,

    date: "04/12/2016"
  },
  {
    name: "crime",
    title: "Melbourne",
    lat: 32.733247,
    lng: -117.22652,
    id: 2,
    date: "04/12/2016"
  },
  {
    name: "crime",
    title: "crime",
    lat: 32.658606,
    lng: -117.101303,
    id: 3 ,
    date: "04/12/2016"
  },
  {
    name: "crime",
    title: "crime",
    lat: 32.745511,
    lng: -117.207977,
    id: 3,
    date: "04/12/2016"
  }
];

export default {
  data
};

I basically want to the exact same thing the google example is doing, just asking how can i convert there vanilla javascript to my react, having issues understanding what code goes where, i know inside curly braces where we can add some javascript inside the jsx? my markers have infowindows with the clicks, thats about the only difference, and latitude and longitutes are not set up in an single array alone i have other variables inside my array like id,title,name etc . thank you

// If you're adding a number of markers, you may want to drop them on the map
// consecutively rather than all at once. This example shows how to use
// window.setTimeout() to space your markers' animation.

var neighborhoods = [
  {lat: 52.511, lng: 13.447},
  {lat: 52.549, lng: 13.422},
  {lat: 52.497, lng: 13.396},
  {lat: 52.517, lng: 13.394}
];

var markers = [];
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 52.520, lng: 13.410}
  });
}

function drop() {
  clearMarkers();
  for (var i = 0; i < neighborhoods.length; i++) {
    addMarkerWithTimeout(neighborhoods[i], i * 200);
  }
}

function addMarkerWithTimeout(position, timeout) {
  window.setTimeout(function() {
    markers.push(new google.maps.Marker({
      position: position,
      map: map,
      animation: google.maps.Animation.DROP
    }));
  }, timeout);
}

function clearMarkers() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
}

that is the google code for dropping the markers via vanilla javascript, how can i do it in react

Related questions

An URL that automatically collapse the sidebar?

See also questions close to this topic