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