How to create google map with multiple marker from current location to 10 km range in rectangle form

Question

I am developing a web app that are based on google map. I am using angular js for it. I have to develop multiple marker on google map but I have to show only these markers which will be in 10 KM range but not in radius it should be from corners.
I using map.getBounds() for getting all corner's latitude and longitude I am new in angular js so please help me.

Answer 1

You can use ng-repeat, not sure if the code is correct, but the base idea is the next:

// html
<div ng-controller="mapCtrl as vm">
<ng-map zoom="15" center="vm.center">
    <marker ng-repeat="position in vm.positions"
            position="{{position.pos}}"
            title="pos: {{position.pos}}">
    </marker>
</ng-map>

// js
angular.module('app').controller('mapCtrl', function() {
    var vm = this;

    var markersCount = 10;
    var distanceBetweenMarkers = 0.01;

    vm.center = [40, -70];
    vm.positions = [];

    for(var i = 0; i < markersCount; i += 1) {
        var leftMarker = [vm.center[0] - distanceBetweenMarkers, vm.center[1]];
        var rightMarker = [vm.center[0] + distanceBetweenMarkers, vm.center[1]];

        vm.positions.push(leftMarker);
        vm.positions.push(rightMarker);
    }
});

I hope my answer will help you. : )
Thanks. : )