Markers On Map

v1.4.0

Use highly customizable maps (Google Maps) with multiple custom Markers.

Get it on

Basic Usage

(A) Import import MarkersOnMap from 'markers-on-map'; (B) Add to HTML <script src="dist/markers-on-map-1.4.0.js"></script> Initialize // Basic initialize MarkersOnMap.Init({ googleApiKey: null, // required => Google Maps JavaScript API Key (in string format) markerObjects: [ // at least one required => Marker Latitude and Longitude as number { markerLat: 39.925018, markerLong: 32.836956, }, ], }); Run /* * @param1 {string}: Required, Select the element (ID or Class) * @param2 {function}: Optional, A callback function after the map has been created. */ MarkersOnMap.Run('div#GoogleMaps'); // e.g. With a Callback function (v1.4.0 and the next versions) MarkersOnMap.Run('div#GoogleMaps', function () { // codes here... });

Remarker

Remarker // Use "MarkersOnMap.Remarker()" function to replace all markers to new ones. // Call the function with an array includes new marker objects => MarkersOnMap.Remarker([{...},{...},]); MarkersOnMap.Remarker([ // At least one marker required { markerLat: 39.925018, markerLong: 32.836956, }, { markerLat: 39.9412639, markerLong: 32.8495664, }, ]);

Advanced Usage

All (Default) Options // All options with descriptions MarkersOnMap.Init({ googleApiKey: null, // required => Google Maps JavaScript API Key (in string format) googlePlacesApiEnabled: false, // if "Google Maps Places API" enabled on "Google APIs Console" can set "true" googlePlacesContentButton: 'Get Directions', // available if "googlePlacesApiEnabled" is "true" mapWidth: '100%', // map width mapHeight: '450px', // map height mapBackgroundColor: '#f8f8f8', // map background color mapCenterLat: 39.925054, // center of the world (lat) mapCenterLong: 32.8347552, // center of the world (long) mapZoomLevel: 13, // map zoom level mapMinZoom: 2, // map min zoom level mapMaxZoom: 18, // map max zoom level mapZoomControl: false, // map zoom control buttons mapAnimatedZoom: false, // map animated zoom mapTypeId: 'roadmap', // map type => "ROADMAP" || "SATELLITE" || "HYBRID" || "TERRAIN" mapTypeControl: false, // map type control buttons mapStreetViewControl: false, // map street view control buttons mapFullscreenControl: true, // map fullscreen control buttons mapRotateControl: false, // map rotate control buttons mapScaleControl: false, // map scale control buttons mapClickableIcons: true, // map clickable points of interest mapDraggable: true, // map draggable mapScrollWheel: true, // map mouse scroll zoom mapDisableDoubleClickZoom: false, // map double click zoom mapStyles: null, // map styles => [object] => (snazzymaps or etc. services could be helpful) markerDefaultUrl: 'base64', // map default marker url (an image url or base64 png/jpg) markerDropAnimation: 'drop', // map marker animation => "drop" || "bounce" || "null" for off markerAdjustZoom: true, // adjust map zoom by markers markerOverlay: true, // custom markers img element wrapper markerOverlayClassName: 'mom-marker', // custom markers wrapper class name => e.g. ".mom-marker img { ...css codes };" markerLabel: { // map markers labels useLabel: false, // map marker use label labelPosition: 'top', // map marker label position => "top" || "bottom" labelFontSize: '12px', // map marker label font size labelFontWeight: '600', // map marker label font weight labelFontFamily: 'Roboto', // map marker label font family }, markerObjects: [ // at least one required => Marker Latitude and Longitude as number { markerLat: 39.925018, // required => marker latitude markerLong: 32.836956, // required => marker longitude markerTitle: 'Anitkabir', // optional => marker title markerSize: 45, // optional => marker size markerUrl: 'base64', // optional => marker url (an image url or base64 png/jpg) markerLabelText: 'MOM', // optional => if "markerLabel.usaLabel" is true markerContent: null, // optional => custom html content infowindow when marker clicked markerContentFromGoogleQuery: 'Anitkabir', // optional => infowindow from Google Places when marker clicked (if "googlePlacesApiEnabled" is true) markerCallback: null, // v1.1.0 and next versions => optional => A callback function can be used when marker element clicked closeCallback: null, // v1.3.0 and next versions => optional => A callback function can be used when marker infowindow close button element clicked }, ], });