markers-on-map-react v1.2.0

Markers On Map - React

Use highly customizable maps (Google Maps) with multiple custom Markers in your React projects.

Current Version

1.2.0 *

Website and Demo

https://furcan.github.io/Markers-On-Map-React/

Install

npm

npm i markers-on-map-react

yarn

yarn add markers-on-map-react

Import > Init > Run

import React, { Component } from 'react';

// Import Markers On Map
import MarkersOnMap from 'markers-on-map-react';

// Any component you need to use
class GoogleMap extends Component {

  // Any lifecycle method you need to use
  componentDidMount() {

    // Basic initialize
    MarkersOnMap.Init({

      googleApiKey: null, // required => Google Maps JavaScript API Key (in string format)

      markerObjects: [
        // at least one object required 
        {
          markerLat: 39.925018, // marker latitude as number
          markerLong: 32.836956, // marker longitude as number
        },
      ],
    });

    // Select map element (ID or Class)
    MarkersOnMap.Run('div#GoogleMap');

  }
  
  render() {

    return (

      // Map element
      <div id="GoogleMap"></div>

    );

  }

}

Remarker

// Use "MarkersOnMap.Remarker()" function to replace all markers to new ones.

// Call the function with an array includes new marker objects => MarkersOnMap.Remarker([{...},{...},]);

const newMarkerArray = [
  // At least one marker (object) required  
  {
    markerLat: 40.2155784,
    markerLong: 28.937106,
  },
  {
    markerLat: 39.9412639,
    markerLong: 32.8495664,
  },
]

MarkersOnMap.Remarker(newMarkerArray);

Initialize (Advanced) + (All Default Options)

// All options with descriptions
MarkersOnMap.Init({

  // required => Google Maps JavaScript API Key (in string format)
  googleApiKey: null, 

  // if "Google Maps Places API" enabled on "Google APIs Console" can set "true"
  googlePlacesApiEnabled: false, 

  // available if "googlePlacesApiEnabled" is true
  googlePlacesContentButton: 'Get Directions',

  // map width
  mapWidth: '100%', 

  // map height
  mapHeight: '450px',

  // map background color
  mapBackgroundColor: '#f8f8f8',

  // center of the world (lat)
  mapCenterLat: 39.925054,

  // center of the world (long)
  mapCenterLong: 32.8347552, 

  // map zoom level
  mapZoomLevel: 13, 

  // map min zoom level
  mapMinZoom: 2, 

  // map max zoom level
  mapMaxZoom: 18, 

  // map zoom control buttons
  mapZoomControl: false, 

  // map animated zoom
  mapAnimatedZoom: false, 

  // map type => "ROADMAP" || "SATELLITE" || "HYBRID" || "TERRAIN"
  mapTypeId: 'roadmap', 

  // map type control buttons 
  mapTypeControl: false, 

  // map street view control buttons
  mapStreetViewControl: false, 

  // map fullscreen control buttons
  mapFullscreenControl: true, 

  // map rotate control buttons
  mapRotateControl: false, 

  // map scale control buttons
  mapScaleControl: false, 

  // map clickable points of interest
  mapClickableIcons: true, 

  // map draggable
  mapDraggable: true, 

  // map mouse scroll zoom
  mapScrollWheel: true, 

  // map double click zoom
  mapDisableDoubleClickZoom: false, 

  // map styles => [object] => (snazzymaps or etc. services could be helpful)
  mapStyles: null, 

  // map default marker url
  markerDefaultUrl: momMarkerBase64(), // this function return default base64 icon 

  // map marker animation => "drop" || "bounce" || "null" for off
  markerDropAnimation: 'drop', 

  // adjust map zoom by markers
  markerAdjustZoom: true, 

  // custom markers img element wrapper
  markerOverlay: true, 

  // custom markers wrapper class name => e.g. ".mom-marker img { ...css codes };"
  markerOverlayClassName: 'mom-marker', 

  // map markers labels
  markerLabel: { 

    // map marker use label 
    useLabel: false, 

    // map marker label position => "top" || "bottom"
    labelPosition: 'top',

    // map marker label color
    labelColor: '#1e1e1e', 

    // map marker label font size
    labelFontSize: '12px', 

    // map marker label font weight
    labelFontWeight: '600', 

    // map marker label font family
    labelFontFamily: 'Roboto', 
  },

  // map markers options => at least one marker object required
  markerObjects: [ 
    {
      // required => marker latitude
      markerLat: 39.925018, 

      // required => marker longitude
      markerLong: 32.836956,  

      // optional => marker title
      markerTitle: 'Anitkabir', 

      // optional => marker size
      markerSize: 45, 

      // optional => marker url (an image url or base64 png/jpg)
      markerUrl: momMarkerBase64(), // this function return default base64 icon 

      // optional => if "markerLabel.usaLabel" is true
      markerLabelText: 'MOM', 

      // optional => custom html content infowindow when marker clicked
      markerContent: null, 

      // optional => infowindow from Google Places when marker clicked (if "googlePlacesApiEnabled" is true)
      markerContentFromGoogleQuery: 'Anitkabir', 

      // optional => A callback function can be used when marker element clicked
      markerCallback: null,

      // v1.2.0 and the next versions => optional => A callback function can be used when marker infowindow close button element clicked
      closeCallback: null,
    }
  ],
});

Copyright

Copyright © 2019 Markers On Map - React

License

MIT license - https://opensource.org/licenses/MIT