AngularJS Google Maps example

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div my-map=""></div>

CSS

#gmaps {
    width: 100%;
    height: 450px;
}

JavaScript

angular.module('myApp', []).
directive('myMap', function() {
    // directive link function
    var link = function(scope, element, attrs) {
        var map, infoWindow;
        var markers = [];
        
        // map config
        var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(58.010374, 70.229398),
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.LARGE
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
        
        // init the map
        function initMap() {
            if (map === void 0) {
                map = new google.maps.Map(element[0], mapOptions);
            }
        }    
        
        // place a marker
        function setMarker(map, position, title, content,label) {
            var marker;
            var markerOptions = {
                position: position,
                map: map,
                title: title,
                icon: {
                	url: 'http://cdn1.savepice.ru/uploads/2017/3/7/ea85ed0d13e693367e45e2a36049962e-full.png',
                  labelOrigin: new google.maps.Point(5, 30)
                },
                label: {
          color: 'black',
          fontWeight: 'bold',
          fontSize: '16px',
          text: label,
        },
            };

            marker = new google.maps.Marker(markerOptions);
            markers.push(marker); // add marker to array
            
            google.maps.event.addListener(marker, 'click', function () {
                // close window if not undefined
                if (infoWindow !== void 0) {
                    infoWindow.close();
                }
                // create new window
                var infoWindowOptions = {
                    content: content
                };
                infoWindow = new google.maps.InfoWindow(infoWindowOptions);
                infoWindow.open(map, marker);
            });
        }
        
        // show the map and place some markers
        initMap();
       ...