Tag Archives: google maps

On a React Native project I’m currently working on, I’m implementing native (vector) mapviews. Gladly there’s react-native-maps by AirBnB to handle it all.

import React, { Component } from 'react';
import MapView from 'react-native-maps';

class MapViewExample extends Component {

  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      },
      markers: [
      ],
    };
  }

  onRegionChange = (region) => {
    this.setState({ region });
  }

  onMapPress = (e) => {
    this.setState({
      markers: [
        ...this.state.markers,
        {
          coordinate: e.nativeEvent.coordinate,
          key: `marker_${this.state.markers.length}`,
        },
      ],
    });
  }

  render() {
    return (
      <MapView
        region={this.state.region}
        onRegionChange={this.onRegionChange}
        onPress={this.onMapPress}
      >
        {this.state.markers.map(marker => (
          <MapView.Marker
            coordinate={marker.coordinate}
            key={marker.key}
          />
        ))}
      </MapView>
    );
  }

}

By default uses Mapkit on iOS, and Google Maps on Android. It’s also possible to use Google Maps on iOS.

react-native-maps →