Angular - how to make google maps show the name of the database after clicking on the marker

advertisements

I created map using Google Map AngularJS Directive: https://github.com/allenhwkim/angularjs-google-maps

I made it import coordinates from my database (over 200 records) like this:

<div id="map">
    <ng-map zoom="7" center="[52.00, 19.00]">
        <div ng-repeat="each in $ctrl.shops">
            <marker ng-repeat="shops in each" position="[{{shops.lat}}, {{shops.long}}]" />
        </div>
        <control name="shopMap" opened="true" />
    </ng-map>`
</div>

The part of controller looks like:

userApi.getShops().then(function (response) {
        vm.shops = response.data;
    });

getShops is just a function from Api that gets data from the database.

It works fine, putting all the markers on the map. But the next step is to make the map display some info (shop.street, shop.city, shop.street) when clicking on marker. I tried to do it by ng-click but I have no idea how to correctly approach it.


To display some information info window is commonly used in Google Maps:

An InfoWindow displays content (usually text or images) in a popup window above the map, at a given location. The info window has a content area and a tapered stem. The tip of the stem is attached to a specified location on the map.

Typically you will attach an info window to a marker, but you can also attach an info window to a specific latitude/longitude, as described in the section on adding an info window below.

There is a info-window directive for initializing of info window in angularjs-google-maps library, the below example demonstrates how to display information once the marker is clicked

Example

angular.module('mapApp', ['ngMap'])

    .factory('userApi', function ($rootScope, $http) {
        var userApi = {
            getShops: function () {
                return $http.get('https://rawgit.com/vgrem/3962c1b67ec14fb734c4f7fccf697027/raw/data.json').then(function (response) {
                    return response.data;
                });
            }
        }
        return userApi;
    })

    .controller('mapController', function ($scope, NgMap, userApi) {

        NgMap.getMap().then(function (map) {
            $scope.map = map;
        });

        userApi.getShops().then(function (data) {
            $scope.shops = data;
        });

        $scope.showShop = function (event, shop) {
            $scope.selectedShop = shop;
            $scope.map.showInfoWindow('myInfoWindow', this);
        };

    });
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
    <ng-map default-style="true" zoom="5" center="59.339025, 18.065818">
        <info-window id="myInfoWindow">
            <div ng-non-bindable>
                <h4>{{selectedShop.name}}</h4>
            </div>
        </info-window>
        <marker ng-repeat="shop in shops"
                position="{{shop.pos}}" title="{{shop.name}}" id="{{shop.id}}" on-click="showShop(event, shop)">
        </marker>
    </ng-map>

</div>