(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( );
// e.g. With a Callback function (v1.4.0 and the next versions)
MarkersOnMap.Run( , function () {
// codes here...
});
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,
},
]);
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
},
],
});