An easy to use Bing Maps component for React apps. View the demo here.
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="your bing maps API key goes here" />Minimal Example:
import React from "react";
import BingMapsReact from "bingmaps-react";
function MyReactApp() {
return <BingMapsReact bingMapsKey="your bing maps API key goes here" />;
}Customized Example:
import React from "react";
import BingMapsReact from "bingmaps-react";
function BingMap() {
return (
<BingMapsReact
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",
}}
/>
);
}| 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. |
Please reference the Bing Maps V8 Web Control documentation for more information about each of the features listed below.
To 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 withlatitudeandlongitudeproperties.options: an object with Pushpin options;
...
const pushPin = {
center: {
latitude: 27.987850,
longitude: 86.925026,
},
options: {
title: "Mt. Everest",
},
}
const pushPins = [pushPin];
return (
<BingMapsReact
pushPins={pushPins}
viewOptions={{ center: { latitude: 27.98785, longitude: 86.925026 } }}
/>
)
...
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent