Version 1.1.0 Released

Can use a callback function for each marker element clicked.

README.md

@@ -8,7 +8,7 @@ Use highly customizable maps (Google Maps) with multiple custom Markers in your
 
 
 ### Current Version
-1.0.0 [*](https://github.com/furcan/Markers-On-Map/blob/master/ReleaseNotes.md)
+1.1.0 [*](https://github.com/furcan/Markers-On-Map/blob/master/ReleaseNotes.md)
 
 ### Website and Demo
 https://furcan.github.io/Markers-On-Map/
@@ -31,15 +31,15 @@ yarn add markers-on-map
 #### 1- JavaScript
 
 ```html
-<script src="dist/markers-on-map-1.0.0.js"></script>
+<script src="dist/markers-on-map-1.1.0.js"></script>
 ```
 
 #### 2- Initialize (Basic)
 
 ```js
 // Basic usage
 MarkersOnMap.Init({
-  // required => Google Maps JavaScript API Key
+  // required => Google Maps JavaScript API Key (in string format)
   googleApiKey: null, 
 
   // map markers options => at least one marker object required
@@ -93,7 +93,7 @@ MarkersOnMap.Remarker([
 // All options with descriptions
 MarkersOnMap.Init({
 
-  // required => Google Maps JavaScript API Key
+  // required => Google Maps JavaScript API Key (in string format)
   googleApiKey: null, 
 
   // if "Google Maps Places API" enabled on "Google APIs Console" can set "true"
@@ -228,6 +228,9 @@ MarkersOnMap.Init({
 
       // optional => infowindow from Google Places when marker clicked (if "googlePlacesApiEnabled" is true)
       markerContentFromGoogleQuery: 'Anitkabir', 
+
+      // v1.1.0 and next versions => optional => A callback function can be used when marker element clicked
+      markerCallback: null,
     }
   ],
 });

ReleaseNotes.md

@@ -1,9 +1,14 @@
-@0.0.1-beta.01
-* I am trying to say "Hello World!"
+@1.1.0
+* **Added:** Can use a callback function for each marker element clicked.
 
 -----
 
 @1.0.0
 * Hello world! I am Markers On Map.
 
+-----
+
+@0.0.1-beta.01
+* I am trying to say "Hello World!"
+
 -----

index.css

@@ -1,6 +1,6 @@
 /*!
 * Markers On Map ('https://github.com/furcan/Markers-On-Map')
-* Version: 1.0.0
+* Version: 1.1.0
 * Author: Furkan MT ('https://github.com/furcan')
 * Copyright 2019 Markers On Map, MIT Licence ('https://opensource.org/licenses/MIT')*
 */
@@ -126,6 +126,7 @@ height:500px;
 border-radius: 0 0 20% 20%;}
 
 .map-wrapper .head {
+position: relative;
 text-align:center;
 float: left;
 width: 100%;

index.html

@@ -27,7 +27,7 @@
     <link id="FontMuli" href="https://fonts.googleapis.com/css?family=Muli:300,400,600,700,900&display=swap&subset=latin-ext" rel="stylesheet">
     <link id="FontConsolas" href="https://fonts.googleapis.com/css?family=Inconsolata:400,700&amp;subset=latin-ext" rel="stylesheet">
 
-    <link rel="stylesheet" href="index.css?v=1.0.0">
+    <link rel="stylesheet" href="index.css?v=1.1.0">
 
 </head>
 
@@ -40,7 +40,7 @@
 
             <div class="max-content">
                 <div class="head">
-                    <h1 class="logo"><a href="https://furcan.github.io/Markers-On-Map/">Markers On Map<i class="fab fa-js-square"></i></a></h1>
+                    <h1 class="logo" data-toggle="tooltip" title="Current Version: v1.1.0"><a href="https://furcan.github.io/Markers-On-Map/">Markers On Map<i class="fab fa-js-square"></i></a></h1>
                     <p class="description">Use highly customizable maps (Google Maps) with multiple custom Markers.</p>
                 </div>
 
@@ -65,7 +65,7 @@ <h2><i class="fas fa-chevron-down"></i>Basic Usage</h2>
 
                 <code id="CodeJS">
                     <span class="label">JavaScript</span>
-                    <span class="l1"><span class="char">&lt;</span><span class="bool">script</span> <span class="fnc1">src</span>=<span><span class="str">"/Markers-On-Map/dist/markers-on-map-1.0.0.js"</span></span><span class="char">&gt;&lt;/</span><span class="bool">script</span><span class="char">&gt;</span></span>
+                    <span class="l1"><span class="char">&lt;</span><span class="bool">script</span> <span class="fnc1">src</span>=<span><span class="str">"/Markers-On-Map/dist/markers-on-map-1.1.0.js"</span></span><span class="char">&gt;&lt;/</span><span class="bool">script</span><span class="char">&gt;</span></span>
                 </code>
 
                 <code id="CodeInit">
@@ -74,7 +74,7 @@ <h2><i class="fas fa-chevron-down"></i>Basic Usage</h2>
                     <span class="l1"><span class="fnc1">MarkersOnMap</span>.<span class="fnc2">Init</span>({</span>
 
 
-                    <span class="l1 l2"><span class="fnc1">googleApiKey:</span> <span class="bool">null</span>, <span class="cmmnt">// required => Google Maps JavaScript API Key</span></span>
+                    <span class="l1 l2"><span class="fnc1">googleApiKey:</span> <span class="bool">null</span>, <span class="cmmnt">// required => Google Maps JavaScript API Key (in string format)</span></span>
 
                     <span class="l1 l2"><span class="fnc1">markerObjects:</span> [</span>
 
@@ -142,7 +142,7 @@ <h2><i class="fas fa-chevron-down"></i>Advanced Usage</h2>
                     <span class="l1"><span class="fnc1">MarkersOnMap</span>.<span class="fnc2">Init</span>({</span>
 
 
-                    <span class="l1 l2 rqrd" data-toggle="tooltip" title="This option is required"><span class="fnc1">googleApiKey:</span> <span class="bool">null</span>, <span class="cmmnt">// required => Google Maps JavaScript API Key</span></span>
+                    <span class="l1 l2 rqrd" data-toggle="tooltip" title="This option is required"><span class="fnc1">googleApiKey:</span> <span class="bool">null</span>, <span class="cmmnt">// required => Google Maps JavaScript API Key (in string format)</span></span>
 
                     <span class="l1 l2"><span class="fnc1">googlePlacesApiEnabled:</span> <span class="bool">false</span>, <span class="cmmnt">// if "Google Maps Places API" enabled on "Google APIs Console" can set "true"</span></span>
                     <span class="l1 l2"><span class="fnc1">googlePlacesContentButton:</span> <span class="str">'Get Directions'</span>, <span class="cmmnt">// available if "googlePlacesApiEnabled" is "true"</span></span>
@@ -212,6 +212,9 @@ <h2><i class="fas fa-chevron-down"></i>Advanced Usage</h2>
                     <span class="l1 l4"><span class="fnc1">markerLabelText:</span> <span class="str">'MOM'</span>, <span class="cmmnt">// optional => if "markerLabel.usaLabel" is true</span></span>
                     <span class="l1 l4"><span class="fnc1">markerContent:</span> <span class="bool">null</span>, <span class="cmmnt">// optional => custom html content infowindow when marker clicked</span></span>
                     <span class="l1 l4"><span class="fnc1">markerContentFromGoogleQuery:</span> <span class="str">'Anitkabir'</span>, <span class="cmmnt">// optional => infowindow from Google Places when marker clicked (if "googlePlacesApiEnabled" is true)</span></span>
+
+                    <span class="l1 l4" data-toggle="tooltip" title="v1.1.0 and next versions"><span class="fnc1">markerCallback:</span> <span class="bool">null</span>, <span class="cmmnt">// v1.1.0 and next versions => optional => A callback function can be used when marker element clicked</span></span>
+
                     <span class="l1 l3">},</span>
                     <span class="l1 l2">],</span>
 
@@ -228,12 +231,12 @@ <h2><i class="fas fa-chevron-down"></i>Advanced Usage</h2>
 
     </div>
 
-    <script src="dist/markers-on-map-1.0.0.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/notiflix/dist/notiflix-aio-1.6.0.min.js"></script>
+    <script src="dist/markers-on-map-1.1.0.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/notiflix/dist/notiflix-aio-1.7.1.min.js"></script>
     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
     <script src="https://kit.fontawesome.com/833245c2e4.js"></script>
     <script src="index-tooltip.js"></script>
-    <script src="index.js?v=1.0.0"></script>
+    <script src="index.js?v=1.1.0"></script>
 </body>
 
 </html>

index.js

@@ -1,6 +1,6 @@
 /*!
 * Markers On Map ('https://github.com/furcan/Markers-On-Map')
-* Version: 1.0.0
+* Version: 1.1.0
 * Author: Furkan MT ('https://github.com/furcan')
 * Copyright 2019 Markers On Map, MIT Licence ('https://opensource.org/licenses/MIT')*
 */
@@ -18,6 +18,9 @@ MarkersOnMap.Init({
             markerLong: 32.836956,
             markerTitle: 'This marker getting content from Google Places API',
             markerContentFromGoogleQuery: 'Anitkabir',
+            markerCallback: function(){
+                Notiflix.Notify.Success('This is a callback.');
+            },
         },
         {
             markerLat: 39.935986,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "markers-on-map",
-  "main": "dist/markers-on-map-1.0.0.js",
-  "version": "1.0.0",
+  "main": "dist/markers-on-map-1.1.0.js",
+  "version": "1.1.0",
   "description": "Use highly customizable maps (Google Maps) with multiple custom Markers in your web projects.",
   "homepage": "https://github.com/furcan/Markers-On-Map",
   "files": [