An URL that automatically collapse the sidebar?
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