Tag Archives: html

Google Maps JavaScript Wrapper

Some of the projects I’ve implemented required some dynamic or static maps.

Of course most powerful maps library at that time was Google Maps.

The wrapper allows the insertion of markers with custom icon, circles, polylines and setting the center and zoom of the map.

Here’s one version of the JavaScript Google Maps Wrapper that I’ve created:

function GMaps(opt) {
    this.map          = null;

    this.circles      = [];
    this.markers      = [];
    this.polylines    = [];

    this.m_icon_path  = opt.icon_path || null;
    this.m_icon       = null;
    
    this.lat          = opt.lat || 45.8805435;
    this.lng          = opt.lng || 24.9582169;
    this.zoom         = opt.zoom || 7;

    this._init(opt);
}

GMaps.prototype._init = function(opt) { 
    var self = this;

    if(opt == null) {
        opt = {};
    }

    var map_options = {
        zoom:               self.zoom,
        center:             new google.maps.LatLng(self.lat, self.lng),
        mapTypeId:          google.maps.MapTypeId.ROADMAP,
        streetViewControl:  false,
        scaleControl:       false,
        mapTypeControl:     false,
        panControl:         false,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        }
    };

    self.map = new google.maps.Map(document.getElementById(opt.element), map_options);

    if(self.icon_path) {
        self.icon = new google.maps.MarkerImage(self.icon_path, null, null, null, new google.maps.Size(20, 26));
    }
};

GMaps.prototype.check_resize = function() {
    var self = this; 
    
    google.maps.event.addListenerOnce(self.map, 'idle', function() {
        google.maps.event.trigger(self.map, 'resize');
        self.map.setCenter(new google.maps.LatLng(self.lat, self.lng));
    });
};

GMaps.prototype.clear_markers = function() {
    for(var i=0; i<this.markers.length; ++i) {
        if(this.markers[i].circle != null) {
            this.markers[i].circle.setMap(null);
        }

        this.markers[i].setMap(null);
    }

    this.markers = [];
};

GMaps.prototype.clear_polylines = function() {
    for(var i=0; i<this.polylines.length; ++i) {
        if(this.polylines.markers != null) {
            for(var y=0; y<this.polylines.markers.length; ++y) {
                this.polylines.markers[y].setMap(null);
            }
        }

        this.polylines[i].setMap(null);
    }

    this.polylines = [];
};

GMaps.prototype.clear_circles = function() {
    for(var i=0; i<this.circles.length; ++i) {
        this.circles[i].setMap(null);
    }

    this.circles = [];
};

GMaps.prototype.reset = function() {
    this.clear_markers();
    this.clear_polylines();
    this.clear_circles();
};

GMaps.prototype.set_icon_path = function(path) {
    this.icon_path = path;

    if(this.icon_path) {
        this.icon = new google.maps.MarkerImage(this.icon_path, null, null, null, new google.maps.Size(71, 71));
    }
};

GMaps.prototype.set_zoom = function(zoom) {
    this.map.setZoom(zoom);
};

GMaps.prototype.set_center = function(lat, lng, opt) {
    this.map.setCenter(new google.maps.LatLng(lat, lng));

    if(opt && opt.zoom) {
        this.map.setZoom(opt.zoom);
    }
};

GMaps.prototype.add_marker = function(lat, lng, opt) {
    if(opt == null) {
        opt = {};
    }

    var m = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map:      this.map,
        title:    opt.title
    });

    if(this.icon) {
        m.setIcon(this.icon);
    }

    if(opt.circle) {
        m.circle = new google.maps.Circle({
            center:       new google.maps.LatLng(lat, lng),
            map:          this.map,
            strokeWeight: 0,
            fillColor:    opt.circle_fill || '#F00',
            radius:       opt.circle_radius || 50
        });
    }

    this.markers.push(m);
};

GMaps.prototype.add_polyline = function(items, show_origin) {
    var path = [];

    for(var i=0; i<items.length; ++i) {
        path.push(new google.maps.LatLng(items[i].lat, items[i].lng));
    }

    var p = new google.maps.Polyline({
        path: path,
        map:  this.map
    });
    
    if(show_origin) {
        p.markers = [];
        p.markers.push(this.add_marker(path[0].lat(), path[0].lng(), {}));
        p.markers.push(this.add_marker(path[path.length-1].lat(), path[path.length-1].lng(), {}));
    }

    this.polylines.push(p);
};

GMaps.prototype.add_circle = function(lat, lng, opt) {
    if(opt == null) {
        opt = {};
    }

    this.circles.push(new google.maps.Circle({
        center:       new google.maps.LatLng(lat, lng),
        map:          this.map,
        strokeWeight: 0,
        fillColor:    opt.fill || '#F00',
        radius:       opt.radius || 50
    }));
};

Usage:

Create element:

<div id="map-wrapper"></div>

Set element style:

<style type="text/css">
    #map-wrapper {
        width: 100%;
        height: 100%;
    }
</style>

Create instance of Google Maps Wrapper:

var map_instance = new GMaps({
    element:    'map-wrapper',
    zoom:       7,
    lat:        45.8805435,
    lng:        24.9582169,
    icon_path:  'http://www.catalinmunteanu.com/wp-content/uploads/2015/01/gmaps_marker.png'
});

// Setting map center
map_instance.set_center(45.8805435, 24.9582169, {zoom: 7});

// Setting map zoom
map_instance.set_zoom(7);

// Change/Set marker icon path (or use default icon)
map_instance.set_icon_path('http://www.catalinmunteanu.com/wp-content/uploads/2015/01/GMaps_marker.png');

// Create marker (circle is optional)
map_instance.add_marker(45.8805435, 24.9582169, {
    circle:         true,
    circle_radius:  20000
});

// Create polyline
map_instance.add_polyline([
    {lat: 45.6725422, lng: 23.567376},
    {lat: 45.0239766, lng: 24.887982},
    {lat: 45.6725422, lng: 26.2150817}
], true);

// Create circle
map_instance.add_circle(46.5037588, 24.2036717, {radius: 20000, fill: '#336699'});
map_instance.add_circle(46.5037588, 25.6674779, {radius: 20000, fill: '#336699'});

// To clear the map use
// map_instance.clear_markers();
// map_instance.clear_polylines();
// map_instance.clear_circles();

// Or with just one call
// map_instance.reset();

 

If  you like this article don’t forget to share it.

AngularJS Custom Dropdown Time Filter

I’ve created this filter to allow hour selection using HTML dropdown.

The filter accepts as input three paramers: the starting hour, the ending hour, and the minute interval.

var app = angular.module('APP', ['APP.filters']);

app.controller('MainController', ['$scope', function($scope) {
 
}]);

angular.module('APP.filters', []).filter('time', function() {
    return function(input, from, to, interval) {
        from     = parseInt(from, 10);
        to       = parseInt(to, 10);
        interval = parseInt(interval, 10);

        for(var i=from, y=0; i<=to; ++i, y+=interval) {
            for(var y=0; y<60; y+=interval) {
                input.push(((i % 12) || 12)+ ":" + (y===0?'00':y) +" " + (i>12?'pm':'am'));
            }
        }
    
        return input;
    };
});

Usage:

<div ng-app="APP" ng-controller="MainController">
    <select>
        <option ng-repeat="h_m in [] | time:8:20:60">{{h_m}}</option>
    </select>
</div>

The above filter time:8:20:60 will output all the hours starting with 8 AM – 8 PM

The starting/ending hour must be between 0-24.

The interval can be between 1-60.

 

The filter can be used for showing multiple minutes in an hour.

For example time:10:14:15 will output 10:00 am, 10:15 am, 10:30 am, … , 13:45 pm, 14:00 pm.