@hsluoyz/bingmaps-react

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