Bing Maps - React

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

Prerequisites

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.

Installation

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="1a2b3c4d5e6f7g8h9i0j"
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 of parent element |
| mapOptions | object | null | A Bing Maps MapOptions Object. See the MapOptions Object documentation for more information about each option. |
| 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 inbox box 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 of parent element |