An easy to use Bing Maps component for React apps
npm install bingmaps-react


An easy to use Bing Maps component for React apps. View the demo here.

- Bing Maps - React
- Prerequisites
- Installation
- Usage
- Props
- Examples
- Pushpins
You must have a Bing Maps API key to take full advantage of this component. You can obtain an API key from the Bing Maps Dev Center.
yarn add bingmaps-react
`
OR
`
npm install bingmaps-react
`Usage
Import the BingMapsReact component.`javascript
import BingMapsReact from "bingmaps-react";
`Render the component, passing in your bing maps API key
`javascript
`Minimal Example:
`javascript
import React from "react";
import BingMapsReact from "bingmaps-react";function MyReactApp() {
return ;
}
`Customized Example:
`javascript
import React from "react";
import BingMapsReact from "bingmaps-react";function BingMap() {
return (
bingMapsKey="your bing maps API key goes here"
height="500px"
mapOptions={{
navigationBarMode: "square",
}}
width="500px"
viewOptions={{
center: { latitude: 42.360081, longitude: -71.058884 },
mapTypeId: "grayscale",
}}
/>
);
}
`Props
| Prop | Type | Default | Note |
| --------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| bingMapsKey | string | null | Your bing maps API key |
| height | string | "100%" | The map defaults to 100% height and width of parent element. |
| mapOptions | object | null | A Bing Maps MapOptions Object. See the MapOptions Object documentation for more information about each option. |
| onMapReady | function | null | Due to the asynchronous nature of the Bing Maps API you may encounter errors if you change props before the map has finished an initial load. You can pass a function to the onMapReady prop that will only run when the map has finished rendering. |
| pushPins | array | null | An array of pushpin objects. See the Bing Maps Pushpin documentation for more information. |
| pushPinsWithInfoboxes | array | null | An array of pushpin objects with infobox options. See the Bing Maps Infobox documentation for more information. |
| viewOptions | object | null | A Bing Maps ViewOptions Object. See the ViewOptions Object documentation for more information about each option. |
| width | string | "100%" | The map defaults to 100% height and width of parent element. |
Examples
Please reference the Bing Maps V8 Web Control documentation for more information about each of the features listed below.
$3
DocsTo add Pushpins to the map, pass in an array of pushpin objects to the
pushPins prop. Each Pushpin object should have the following properties:-
center: An object with latitude and longitude properties.
- options: an object with Pushpin options;`javascript
...const pushPin = {
center: {
latitude: 27.987850,
longitude: 86.925026,
},
options: {
title: "Mt. Everest",
},
}
const pushPins = [pushPin];
return (
pushPins={pushPins}
viewOptions={{ center: { latitude: 27.98785, longitude: 86.925026 } }}
/>
)
...
``