How to use bpk-component-map - 3 common examples
To help you get started, we’ve selected a few bpk-component-map examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
Skyscanner / backpack / packages / bpk-docs / src / pages / MapPage / MapPage.js View on Github 
import iosScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/ios/default.png';
import androidScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/android/default.png';
import nativeMapReadme from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/README.md';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import IntroBlurb from '../../components/IntroBlurb';
import STYLES from './MapPage.scss';
const AlignedLandmarkIconLg = withRtlSupport(LandmarkIconLg);
const AlignedBusIconSm = withRtlSupport(BusIconSm);
const AlignedFoodIconSm = withRtlSupport(FoodIconSm);
const AlignedLeisureIconLg = withRtlSupport(LeisureIconSm);
const BpkMapWithScript = withGoogleMapsScript(BpkMap);
const API_KEY = process.env.GOOGLE_MAPS_API_KEY || '';
const MAP_URL = `https://maps.googleapis.com/maps/api/js?v=3.exp&key=${API_KEY}&libraries=geometry,drawing,places`;
const getClassName = cssModules(STYLES);
// Shibuya crossing, Tokyo.
const COORDINATES: BpkMapLatLong = {
latitude: 35.661777,
longitude: 139.704051,
};
class StatefulBpkMapMarkers extends Component<{}, { selected: number }> {
constructor() {
super();
this.state = { selected: 0 };
}/>
}
position={{
latitude: 35.6615,
longitude: 139.705051,
}}
onClick={() => {
this.selectMarker(2);
}}
/>
}
position={{
latitude: 35.6605,
longitude: 139.704041,
}}
onClick={() => {
this.selectMarker(3);
}}
/>
);
}
}/>
}
position={{
latitude: 35.6625,
longitude: 139.705051,
}}
onClick={() => {
this.selectMarker(1);
}}
/>
}
position={{
latitude: 35.6615,
longitude: 139.705051,
}}
onClick={() => {
this.selectMarker(2);
}}
/>
}
position={{
latitude: 35.6605,
longitude: 139.704041,
