Activity Stream
Report-Fix / Update

Add 3 files to Tasks

Monday , 4:24 PM
Project Status

Marked Design as Completed

Monday , 3:00 PM
UI
Larkon Application UI v2.0.0 Latest

Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

Monday , 2:10 PM
avatar-5
Alex Smith Attached Photos
Monday 1:00 PM
avatar-5
Rebecca J. added a new team member

Added a new member to Front Dashboard

Monday 10:00 AM
Achievements

Earned a " Best Product Award"

Monday 9:30 AM
View All
Theme Settings
Color Scheme
Topbar Color
Menu Color
Sidebar Size
Usage#
Link
                                                            
                                                                 <!-- Google Map Js -->
                                                                 <script src="assets/vendor/gmaps/gmaps.min.js"></script>
                                                       
                                                                 <!-- Page Js -->
                                                                 <script src="assets/js/components/maps-google.js"></script>
                                                            
                                                       
Basic Example#

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

                                                                      
                                                                           <label for="cleave-date" class="form-label">Date</label>
                                                                           <input type="text" class="form-control" placeholder="DD-MM-YYYY" id="cleave-date">
                                                                      
                                                                 
                                                                      
                                                                           initBasicGoogleMap() {
                                                                                var map = new GMaps({
                                                                                     div: '#gmaps-basic', lat: -12.043333, lng: -77.028333
                                                                                });
                                                                                }
                                                                      
                                                                 
Markers Google Map#

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

                                                                      
                                                                           <label for="cleave-date" class="form-label">Date</label>
                                                                           <input type="text" class="form-control" placeholder="DD-MM-YYYY" id="cleave-date">
                                                                      
                                                                 
                                                                      
                                                                           initMarkerGoogleMap() {
                                                                                var map = new GMaps({
                                                                                    div: '#gmaps-markers', lat: -12.043333, lng: -77.028333
                                                                                });
                                                                            }
                                                                      
                                                                 
Street View Panoramas Google Map#

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

                                                                      
                                                                           <label for="cleave-date" class="form-label">Date</label>
                                                                           <input type="text" class="form-control" placeholder="DD-MM-YYYY" id="cleave-date">
                                                                      
                                                                 
                                                                      
                                                                           initStreetViewGoogleMap() {
                                                                                var panorama = GMaps.createPanorama({
                                                                                     el: '#panorama', lat: 42.3455, lng: -71.0983
                                                                                });
                                                                                }
                                                                      
                                                                 
Google Map Types#

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

                                                                           
                                                                                <label for="cleave-date" class="form-label">Date</label>
                                                                                <input type="text" class="form-control" placeholder="DD-MM-YYYY" id="cleave-date">
                                                                           
                                                                      
                                                                      
                                                                           initMapTypes() {
                                                                                var map = new GMaps({
                                                                                     el: '#gmaps-types', lat: 42.3455, lng: -71.0983, mapTypeControlOptions: {
                                                                                          mapTypeIds: ["hybrid", "roadmap", "satellite", "terrain", "osm", "cloudmade"]
                                                                                     }
                                                                                });
                                                                                map.addMapType("osm", {
                                                                                     getTileUrl: function (coord, zoom) {
                                                                                          return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
                                                                                     }, tileSize: new google.maps.Size(256, 256), name: "OpenStreetMap", maxZoom: 18
                                                                                });
                                                                                map.addMapType("cloudmade", {
                                                                                     getTileUrl: function (coord, zoom) {
                                                                                          return "http://b.tile.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/1/256/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
                                                                                     }, tileSize: new google.maps.Size(256, 256), name: "CloudMade", maxZoom: 18
                                                                                });
                                                                                map.setMapTypeId("osm");
                                                                                return map;
                                                                                }
                                                                      
                                                                 
Ultra Light With Labels#

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

                                                                      
                                                                           <label for="cleave-date" class="form-label">Date</label>
                                                                           <input type="text" class="form-control" placeholder="DD-MM-YYYY" id="cleave-date">
                                                                      
                                                                 
                                                                      
                                                                           initUltraLightMap() {
                                                                                var map = new GMaps({
                                                                                    div: '#ultra-light', lat: 42.3455, lng: -71.0983, styles: [{
                                                                                        "featureType": "water", "elementType": "geometry", "stylers": [{
                                                                                            "color": "#e9e9e9"
                                                                                        }, {
                                                                                            "lightness": 17
                                                                                        }]
                                                                                    }, {
                                                                                        "featureType": "landscape", "elementType": "geometry", "stylers": [{
                                                                                            "color": "#f5f5f5"
                                                                                        }, {
                                                                                            "lightness": 20
                                                                                        }]
                                                                                    }, {
                                                                                        "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{
                                                                                            "color": "#ffffff"
                                                                                        }, {
                                                                                            "lightness": 17
                                                                                        }]
                                                                                    }, {
                                                                                        "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{
                                                                                            "color": "#ffffff"
                                                                                        }, {
                                                                                            "lightness": 29
                                                                                        }, {
                                                                                            "weight": 0.2
                                                                                        }]
                                                                                    }, {
                                                                                        "featureType": "road.arterial", "elementType": "geometry", "stylers": [{
                                                                                            "color": "#ffffff"
                                                                                        }, {
                                                                                            "lightness": 18
                                                                                        }]
                                                                                    }, {
                                                                                        "featureType": "road.local", "elementType": "geometry", "stylers": [{
                                                                                            "color": "#ffffff"
                                                                                        }, {
                                                                                            "lightness": 16
                                                                                        }]
                                                                                    }, {
                                                                                        "featureType": "poi", "elementType": "geometry", "stylers": [{
                                                                                            "color": "#f5f5f5"
                                                                                        }, {
                                                                                            "lightness": 21
                                                                                        }]
                                                                                    }, {
                                                                                        "featureType": "poi.park", "elementType": "geometry", "stylers": [{
                                                                                            "color": "#dedede"
                                                                                        }, {
                                                                                            "lightness": 21
                                                                                        }]
                                                                                    }, {
                                                                                        "elementType": "labels.text.stroke", "stylers": [{
                                                                                            "visibility": "on"
                                                                                        }, {
                                                                                            "color": "#ffffff"
                                                                                        }, {
                                                                                            "lightness": 16
                                                                                        }]
                                                                                    }, {
                                                                                        "elementType": "labels.text.fill", "stylers": [{
                                                                                            "saturation": 36
                                                                                        }, {
                                                                                            "color": "#333333"
                                                                                        }, {
                                                                                            "lightness": 40
                                                                                        }]
                                                                                    }, {
                                                                                        "elementType": "labels.icon", "stylers": [{
                                                                                            "visibility": "off"
                                                                                        }]
                                                                                    }, {
                                                                                        "featureType": "transit", "elementType": "geometry", "stylers": [{
                                                                                            "color": "#f2f2f2"
                                                                                        }, {
                                                                                            "lightness": 19
                                                                                        }]
                                                                                    }, {
                                                                                        "featureType": "administrative", "elementType": "geometry.fill", "stylers": [{
                                                                                            "color": "#fefefe"
                                                                                        }, {
                                                                                            "lightness": 20
                                                                                        }]
                                                                                    }, {
                                                                                        "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [{
                                                                                            "color": "#fefefe"
                                                                                        }, {
                                                                                            "lightness": 17
                                                                                        }, {
                                                                                            "weight": 1.2
                                                                                        }]
                                                                                    }]
                                                                                });
                                                                            }
                                                                      
                                                                 
Dark#

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

                                                                      
                                                                           <div class="mb-3">
                                                                                <div id="dark" class="gmaps"></div>
                                                                           </div>
                                                                      
                                                                 
                                                                      
                                                                           var map = new GMaps({
                                                                                div: '#dark', lat: 42.3455, lng: -71.0983, styles: [{
                                                                                "featureType": "all", "elementType": "labels", "stylers": [{
                                                                                     "visibility": "on"
                                                                                }]
                                                                                }, {
                                                                                "featureType": "all", "elementType": "labels.text.fill", "stylers": [{
                                                                                     "saturation": 36
                                                                                }, {
                                                                                     "color": "#000000"
                                                                                }, {
                                                                                     "lightness": 40
                                                                                }]
                                                                                }, {
                                                                                "featureType": "all", "elementType": "labels.text.stroke", "stylers": [{
                                                                                     "visibility": "on"
                                                                                }, {
                                                                                     "color": "#000000"
                                                                                }, {
                                                                                     "lightness": 16
                                                                                }]
                                                                                }, {
                                                                                "featureType": "all", "elementType": "labels.icon", "stylers": [{
                                                                                     "visibility": "off"
                                                                                }]
                                                                                }, {
                                                                                "featureType": "administrative", "elementType": "geometry.fill", "stylers": [{
                                                                                     "color": "#000000"
                                                                                }, {
                                                                                     "lightness": 20
                                                                                }]
                                                                                }, {
                                                                                "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [{
                                                                                     "color": "#000000"
                                                                                }, {
                                                                                     "lightness": 17
                                                                                }, {
                                                                                     "weight": 1.2
                                                                                }]
                                                                                }, {
                                                                                "featureType": "administrative.country", "elementType": "labels.text.fill", "stylers": [{
                                                                                     "color": "#e5c163"
                                                                                }]
                                                                                }, {
                                                                                "featureType": "administrative.locality", "elementType": "labels.text.fill", "stylers": [{
                                                                                     "color": "#c4c4c4"
                                                                                }]
                                                                                }, {
                                                                                "featureType": "administrative.neighborhood", "elementType": "labels.text.fill", "stylers": [{
                                                                                     "color": "#e5c163"
                                                                                }]
                                                                                }, {
                                                                                "featureType": "landscape", "elementType": "geometry", "stylers": [{
                                                                                     "color": "#000000"
                                                                                }, {
                                                                                     "lightness": 20
                                                                                }]
                                                                                }, {
                                                                                "featureType": "poi", "elementType": "geometry", "stylers": [{
                                                                                     "color": "#000000"
                                                                                }, {
                                                                                     "lightness": 21
                                                                                }, {
                                                                                     "visibility": "on"
                                                                                }]
                                                                                }, {
                                                                                "featureType": "poi.business", "elementType": "geometry", "stylers": [{
                                                                                     "visibility": "on"
                                                                                }]
                                                                                }, {
                                                                                "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{
                                                                                     "color": "#e5c163"
                                                                                }, {
                                                                                     "lightness": "0"
                                                                                }]
                                                                                }, {
                                                                                "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{
                                                                                     "visibility": "off"
                                                                                }]
                                                                                }, {
                                                                                "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [{
                                                                                     "color": "#ffffff"
                                                                                }]
                                                                                }, {
                                                                                "featureType": "road.highway", "elementType": "labels.text.stroke", "stylers": [{
                                                                                     "color": "#e5c163"
                                                                                }]
                                                                                }, {
                                                                                "featureType": "road.arterial", "elementType": "geometry", "stylers": [{
                                                                                     "color": "#000000"
                                                                                }, {
                                                                                     "lightness": 18
                                                                                }]
                                                                                }, {
                                                                                "featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [{
                                                                                     "color": "#575757"
                                                                                }]
                                                                                }, {
                                                                                "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [{
                                                                                     "color": "#ffffff"
                                                                                }]
                                                                                }, {
                                                                                "featureType": "road.arterial", "elementType": "labels.text.stroke", "stylers": [{
                                                                                     "color": "#2c2c2c"
                                                                                }]
                                                                                }, {
                                                                                "featureType": "road.local", "elementType": "geometry", "stylers": [{
                                                                                     "color": "#000000"
                                                                                }, {
                                                                                     "lightness": 16
                                                                                }]
                                                                                }, {
                                                                                "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [{
                                                                                     "color": "#999999"
                                                                                }]
                                                                                }, {
                                                                                "featureType": "transit", "elementType": "geometry", "stylers": [{
                                                                                     "color": "#000000"
                                                                                }, {
                                                                                     "lightness": 19
                                                                                }]
                                                                                }, {
                                                                                "featureType": "water", "elementType": "geometry", "stylers": [{
                                                                                     "color": "#000000"
                                                                                }, {
                                                                                     "lightness": 17
                                                                                }]
                                                                                }]
                                                                           });
                                                                      
                                                                 
© Larkon. Crafted by Techzaa