MapmyIndia react

React component to implement MapmyIndia Interactive Map API

Getting Started

demo: https://mapmyindia-react-example.herokuapp.com/

Prerequisites

Integrate interactive maps from MapmyIndia into your browser application by simply including MapmyIndia's interactive map API in your script source in the head section.

<script src="https://apis.mapmyindia.com/advancedmaps/v1/<Lic_Key>/map_load?v=1.3"></script>

Installing

npm install mapmyindia-react --save

How to use

import Map from "mapmyindia-react";

class App extends React.Component {
	 render () {
		 return (
		 	 <Map
          markers={[
              {
                  position: [18.5314, 73.845],
                  draggable: true,
                  title: "Marker title",
                  onClick: e => {
                      console.log("clicked ");
                  },
                  onDragend: e => {
                      console.log("dragged");
                  }
              }
          ]}
          />
		 )
	 }
}

Props

| prop | type | default value | | ----------- | ------ | :----------------: | | center | array | [18.5314, 73.8446] | | zoomControl | bool | true | | location | bool | true | | height | string | 500px | | width | string | | | zoom | number | 15 | | hybrid | bool | true | | search | bool | true | | markers | array | [] |

Example for marker array

  [
    {
      position: [],       // [lat, lng]
      draggable: false,   // true / false
      title: '',          // string
      onClick: () => {},   // Marker click event listener
      onDragend: ()=> {}   // Marker dragend event listener (if draggable is set)
    }
  ]

Map events

| Event | default value | | ------------- | :-----------: | | onResize| () => {} | | onZoom| () => {} | | onMove| () => {} | | onClick| () => {} | | onDblclick| () => {} | | onMouseup| () => {} | | onMousedown| () => {} | | onMouseover| () => {} | | onMouseout| () => {} | | onKeypress| () => {} | | onMapLoad| (mapObject) => {} |

Author

• Harish S Khot

Acknowledgments

• MapmyIndia Interactive Map API