I wanna use Google Maps API in React.
I read this article and found out that some packages were released recently.
But I don't know even if I look at the example.
How can I use Google Maps in React?
I want to take a marker, change the marker icon.
Please help me...
Definitely understand that there are packages that help you load Google Map and the Javascript API, e.g.
https://www.npmjs.com/package/google-map-react
https://www.npmjs.com/package/#react-google-maps/api
I used google-map-react before, but now I need a more flexible way to load the Google Maps JavaScript API script.
For those like me who got here by searching for how to use #googlemaps/js-api-loader in React, here is some code sample.
install the npm package:
npm i #googlemaps/js-api-loader
code sample:
import React, { Component } from 'react';
import { Loader } from '#googlemaps/js-api-loader';
const loader = new Loader({
apiKey: "YOUR_API_KEY"
version: "weekly",
libraries: ["places"]
});
export default class DemoComponent extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
let self = this;
const defaultMapOptions = {
center: {
lat: 40.762312,
lng: -73.979345
},
zoom: 11
};
loader.load().then((google) => {
const map = new google.maps.Map(
self.googleMapDiv,
defaultMapOptions);
/*
store them in the state so you can use it later
E.g. call a function on the map object:
this.state.map.panTo(...)
E.g. create a new marker:
new this.state.google.maps.Marker(...)
*/
this.setState({
google: google,
map: map
});
});
}
render() {
return (
<div
ref={(ref) => { this.googleMapDiv = ref }}
style={{ height: '100vh', width: '100%' }}>
</div>
)
}
}
Have you checked out this package and its documentation:
https://www.npmjs.com/package/#react-google-maps/api
I've used it to create a google map inside a React functional component.
There are other react google map packages out there as well.
Related
I was following lama dev youtube channel's video for using mapbox in reactjs.
But when I run the reactjs script, my map component is empty.
video:
https://youtu.be/9oEQvI7K-rA
source code:
https://github.com/safak/youtube/tree/mern-travel-app
my code
import * as React from 'react';
import { useState } from 'react';
import ReactMapGL from 'react-map-gl';
function App() {
const [viewport, setViewport] = useState({
width: "100vw",
height: "100vh",
latitude: 46,
longitude: 17,
zoom: 8,
});
return (
<div className="App">
<ReactMapGL
{...viewport}
mapboxApiAccessToken = {process.env.REACT_APP_MAPBOX}
onViewportChange={nextViewport => setViewport(nextViewport)}
/>
</div>
);
}
export default App;
I followed the coding and in the react part, I created the .env file, installed and imported react-map-gl and used the . For some reason I see only blank screen instead of a map.
I tried the example code from the uber library visgl.github.io, also the source code that you have provided, still the screen was blank.
followed these solutions:
Mapbox blank map React-map-gl | ReactJS
react-map-gl: Map Does Not Appear
Map not showing up when using react-map-gl and create-react-app
but still the Component is empty.
Any help would be useful, thanks!
EDIT 1:
I found this error in the firefox console:
An error occurred while parsing the WebWorker bundle. This is most likely due to improper transpilation by Babel; please see https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling
After the comment from J-007, I added these lines below the previous import lines:
import mapboxgl from 'mapbox-gl';
mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
and the map is working fine now.
EDIT:
This worked only in one project-
https://codesandbox.io/s/react-test-ivbkv?file=/src/App.js
then it didn't work in the example provided in
http://visgl.github.io/react-map-gl/docs/get-started/get-started
Then I found -
https://medium.com/geekculture/building-an-interactive-map-with-mapbox-react-f335384f4863:
and using npx create-react-app projectname exactly as mentioned in this article, i find the map working even in http://visgl.github.io/react-map-gl/docs/get-started/get-started script.
EDIT 2:
Copy pasting code from the Medium article (just in case) -
npx create-react-app mapbox-project
cd mapbox-project
npm i react-map-gl react-map-gl-geocoder
npm start
import React, { Component } from 'react';
import ReactMapGl from 'react-map-gl'
import 'mapbox-gl/dist/mapbox-gl.css';
const mapboxToken = 'YOUR API KEY'
class Map extends Component {
constructor() {
super()
this.state = {
viewport: {
width: '100vw',
height: '100vh',
latitude: 40.78343,
longitude: -73.96625,
zoom: 11
}
}
this.handleViewportChange = this.handleViewportChange.bind(this)
}
handleViewportChange(viewport) {
this.setState(prevState => ({
viewport: {...prevState.viewport, ...viewport}
}))
}
render() {
return (
<ReactMapGl
{...this.state.viewport}
onViewportChange={viewport => this.setState({viewport})}
mapboxApiAccessToken={mapboxToken}
mapStyle="mapbox://styles/mapbox/streets-v10"
/>
)
}
}
export default Map;
What worked for me, was from this page:
http://visgl.github.io/react-map-gl/docs/get-started/get-started
npm install --save react-map-gl mapbox-gl
whereas, I believe the tutorial was just react-map-gl
I'm trying to pass a function as the localGeocoder parameter of a mapbox gl geocoder instance (docs here). I want to do this as part of a react app. The geocoder and map mostly work fine, but I'm not even entering into the function I'm passing when I do geocoding searches. What have I got wrong with this setup?
I know that the localGeocoder function is supposed to return an array of geojson features in the carmen geojson format, but since I couldn't get this to work I just put a console.log() statement in the function and looking at the dev tools in the browser and it's not executing. The main parts of the component are below, but you'll need to fill in your own mapbox accessToken to get it to work. I know that mapbox has a working example of how to pass a localGeocoder function, but that doesn't use react and I think that's where I'm going wrong here so that example isn't really much help to me.
import React from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css'
import Geocoder from 'mapbox-gl-geocoder';
import 'mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'
import './map.scss';
mapboxgl.accessToken = ENTER_YOUR_MAPBOX_ACCESS_TOKEN_HERE;
export class Map extends React.Component {
constructor(props) {
super(props);
this.state = {
lng: -73.9392,
lat: 40.8053,
zoom: 15
};
this.forwardGeocoder = this.forwardGeocoder.bind(this);
}
forwardGeocoder(query) {
console.log('QUERY:', query);
}
componentDidMount() {
const map = new mapboxgl.Map({
container: this.mapContainer,
style: 'mapbox://styles/mapbox/streets-v11',
center: [this.state.lng, this.state.lat],
zoom: this.state.zoom,
zoomAnimation: false
});
const geocoder = new Geocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl,
autocomplete: false,
localGeocoder: this.forwardGeocoder,
proximity: {longitude: this.state.lng, latitude: this.state.lat}
})
map.addControl(geocoder);
}
render() {
return <div ref={el => this.mapContainer = el} className='mapContainer' />
}
}
Alex,
I did a codesandbox to you check (just need to add you API Key).
If you search for coffee, you will see QUERY: coffee in console.
So, the only difference from your code to mine is:
mapbox-gl-geocoder import.
You are doing like this:
import Geocoder from 'mapbox-gl-geocoder';
import 'mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'
And I'm doing like this:
import Geocoder from "#mapbox/mapbox-gl-geocoder";
import "#mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";
As i don´t know how you added the mapbox-gl-geocoder package, i will describe how i did:
I'm using yarn:
yarn add react-map-gl-geocoder
If you are using npm:
npm install react-map-gl-geocoder
After that, my package.json has this versions:
"react": "^16.13.1",
"mapbox-gl": "^1.3.1",
"#mapbox/mapbox-gl-geocoder": "^4.7.0",
Maybe that could be the issue. Hope it works for you.
I'm trying to use this library https://github.com/country-regions/react-country-region-selector for my react native application.
The example code is as follows:
import React from "react";
import { View, Text } from 'react-native';
// note that you can also export the source data via CountryRegionData. It's in a deliberately concise format to
// keep file size down
import {
CountryDropdown,
RegionDropdown,
CountryRegionData
} from "react-country-region-selector";
class Example extends React.Component {
constructor(props) {
super(props);
this.state = { country: "", region: "" };
}
selectCountry(val) {
this.setState({ country: val });
}
selectRegion(val) {
this.setState({ region: val });
}
render() {
const { country, region } = this.state;
return (
<View>
<CountryDropdown
value={country}
onChange={val => this.selectCountry(val)}
/>
<RegionDropdown
country={country}
value={region}
onChange={val => this.selectRegion(val)}
/>
</View>
);
}
}
export default Example;
I changed the divs in the render method into View, which has left me with the current error: Invariant Violation: View config not found for name option.
I'm not sure if this is because the library is intended for React as opposed to React-Native or if there is something else going on that I'm unaware of.
This won't work because this library renders HTML, which is not available in react-native. You can confirm this by going to node_modules/react-country-region-selector/src to see the source code.
However, the Picker component in react-native has a very similar API, so you could easily remake this to be compatible. Note that you should not edit files in your node_modules as they will be corrected any time you run yarn / npm. Instead, you should create your own local version of this module.
It's really just a matter of replacing select with Picker and option with Picker.Item and changing the onChange handlers to work with the Picker instead of expecting a DOM event.
You can learn more about the Picker API here
I'm new to react. And I'm expecting to build a mobile Application from Web-App using Cordova plug-in.
So in this case I want to get the App location. I'm trying this with react-native Geolocation.
I followed the tutorial from facebook at here. But when I tried it, It does not show me the position. Instead value of the position change from unknown to {}.
There might be few errors I'm doing here.
I'm using a proxy
Testing this in browser not in Android or any other native device.
Facebook Link says it is react-native but my project was created by create-react-app which I think not React-native
If any of these is not the cause for this error, Please help.
My code,
import React,{Component} from 'react';
class GeoLocation extends React.Component {
state = { initialPosition: 'unknown',
lastPosition: 'unknown', };
watchID: ?number = null;
componentDidMount() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition( (position) => {
var initialPosition = JSON.stringify(position);
this.setState({initialPosition});
},
(error) => alert(JSON.stringify(error)), {
enableHighAccuracy: true, timeout: 20000, maximumAge: 1000
} );
this.watchID = navigator.geolocation.watchPosition((position) => {
var lastPosition = JSON.stringify(position);
this.setState({lastPosition});
});
}
}
componentWillUnmount() {
navigator.geolocation.clearWatch(this.watchID);
}
render() {
return (
<div className="main">
<h1> Initial position: {this.state.initialPosition} </h1>
<h1> Current position: {this.state.lastPosition} </h1>
</div>
);
}
}
export default GeoLocation;
At HyperTrack we have built a location service and included some React libraries and sample apps for React and Cordova found on our Github. Likely this would solve the issues you are having with grabbing location, or at least get you on the right track.
I started programming in React Native, and I got used to use the syntax:
async myFunction(){
...
return await otherFunction();
}
But I don't know how to make it compatible with React JS and React Native in a shared package. How can I accomplish this so that it works in both platforms?
Thanks!
If you building using create-react-app it's been available since v0.2.3
https://github.com/facebookincubator/create-react-app/releases/tag/v0.2.3
It can be used inside a Component like this
class App extends Component {
constructor(props) {
super(props);
this.state = { message: '' };
}
async componentDidMount() {
this.setState({ message: 'loading...' });
let d = await getData('/posts/1');
this.setState({ message: d });
}
render() {
let { message } = this.state;
return (
<div className="App">
<p className="App-intro">
{ message }
</p>
</div>
);
}
}
See:
https://github.com/facebookincubator/create-react-app/issues/1024
React Native ships with Babel and some Babel presets, whereas React on the web is just React related code.
If you want to use async/await on the web today you'll need Babel and the correct transforms: https://babeljs.io/docs/plugins/transform-async-to-generator/
or the stage-1 presets, which is fairly common in React apps today. http://babeljs.io/docs/plugins/preset-stage-1/
Alternatively you can use Typescript.
Since version 2.1 it is possible to use async/await and directly transpile to ES5 (in other words have it run on ~all browsers)