Free Trial Buy
    Your search did not match any results.
    Map

    Providers and Types

    The provider option specifies which map provider to use: Google Maps (default), Bing Maps (used in this demo), or Google Static Maps.

    You can also set the type option to specify the map type: road, satellite (photographic), or hybrid map.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Copy to CodeSandBox
    Apply
    Reset
    import React from 'react'; import { Map, Key } from 'devextreme-react/map'; import SelectBox from 'devextreme-react/select-box'; import { mapTypes } from './data.js'; class App extends React.Component { constructor(props) { super(props); this.state = { mapTypeValue: mapTypes[0].key }; this.keys = { // NOTE: Specify your map API keys for every used provider //bing: "YOUR_BING_MAPS_API_KEY", //google: "YOUR_GOOGLE_MAPS_API_KEY", //googleStatic: "YOUR_GOOGLE_STATIC_MAPS_API_KEY" }; this.onMapTypeChanged = this.onMapTypeChanged.bind(this); } onMapTypeChanged(e) { this.setState({ mapTypeValue: e.value }); } render() { return ( <div> <Map defaultCenter={['Brooklyn Bridge', 'New York', 'NY']} defaultZoom={14} height={400} width="100%" provider="bing" type={this.state.mapTypeValue}> <Key bing={this.keys.bing} google={this.keys.google} google-static={this.keys.googleStatic}> </Key> </Map> <div className="options"> <div className="caption">Options</div> <div className="option"> <span>Map Type</span>&nbsp; <SelectBox value={this.state.mapTypeValue} onValueChanged={this.onMapTypeChanged} dataSource={mapTypes} displayExpr="name" valueExpr="key" /> </div> </div> </div> ); } } export default App;
    import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
    <!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.7/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
    .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; } .option > span { display: inline-block; width: 100px; } .option > .dx-selectbox { width: 100%; max-width: 350px; display: inline-block; vertical-align: middle; }
    export const mapTypes = [{ key: 'roadmap', name: 'Road Map' }, { key: 'satellite', name: 'Satellite (Photographic) Map' }, { key: 'hybrid', name: 'Hybrid Map' }];
    System.config({ transpiler: 'plugin-babel', meta: { }, paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@20.1', 'devextreme-react': 'npm:devextreme-react@20.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram@1.0.14', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.7', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, }, babelOptions: { sourceMaps: false, stage0: true, react: true } });