MapmyIndia react

React component to implement MapmyIndia Interactive Map API

Getting Started

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| () => {} |

Author

• Kshirod

Acknowledgments

• MapmyIndia Interactive Map API