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.

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"
      }}
    />
  );
}

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 |