An easy to use Bing Maps component for React apps. View the demo.
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
Import the BingMapsReact component.
import BingMapsReact from "bingmaps-react";
Render the component, passing in your bing maps API key
<BingMapsReact bingMapsKey="BING_MAPS_KEY" />
Minimal Example:
import React from "react";
import BingMapsReact from "bingmaps-react";
function MyReactApp() {
return <BingMapsReact bingMapsKey="1a2b3c4d5e6f7g8h9i0j" />;
}
Customized Example:
import React from "react";
import BingMapsReact from "bingmaps-react";
function BingMap() {
return (
<BingMapsReact
bingMapsKey="1a2b3c4d5e6f7g8h9i0j"
height="500px"
mapOptions={{
navigationBarMode: "square"
}}
width="500px"
viewOptions={{
center: { latitude: 42.360081, longitude: -71.058884 },
mapTypeId: "grayscale"
}}
/>
);
}
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 |