如何将动态数据从mysql拉到angularJS然后谷歌地图标记

I am trying to pass dynamic data from mysql then creating multiple markers on google.

Here is my html code.

<div ng-app="mapsApp" ng-controller="MapCtrl">
    <div class="map">
        <div id="map" style="width: 100%;height:738px;"></div>
    </div>
</div>

Here is the angularjs Script.

//Angular App Module and Controller
var investup = angular.module('mapsApp', [])
investup.controller('MapCtrl', function ($scope, $compile) {
    var cities = [
    {
        title: 'xyz',
        city : '<img src="images/xxx.jpg" />',
        lat : 12.2917925,
        long : 76.6704174
    },
    {
        title: 'Add to Cart',
        city : '<button class="org-btn" ng-click="cartone()" style="display:block;font-size:12px;margin:0 auto 0 auto;">Add to Cart</button>',
        lat : 12.2725645,
        long : 76.6705986
    },
];

//Define your locations: HTML content for the info window, latitude, longitude
var popup = [
['<img src="images/xyz.jpg" />'],
['<img src="images/xyz.jpg"/>'],
];

// Setup the different icons and shadows
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';
var icons = [iconURLPrefix + 'red-dot.png', iconURLPrefix + 'purple-dot.png']

var iconsLength = icons.length;

    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(12.2982778, 76.6903664),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        streetViewControl: false,
        panControl: false,
        zoomControlOptions: {
            position: google.maps.ControlPosition.LEFT_BOTTOM
        }
    }

    $scope.popup = popup;

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var activeInfoWindow;
    var activeInfoWindow2;

    var iconCounter = 0;

    $scope.markers = [];

    for (i = 0; i < cities.length; i++) {

        var createMarker = function (info) {
            var marker = new google.maps.Marker({map: $scope.map,icon: icons[iconCounter],position: new google.maps.LatLng(info.lat, info.long),popup: popup[i][0]});

            google.maps.event.addListener(marker, 'click', function() {

                if(activeInfoWindow2 != null)
                activeInfoWindow2.close();

                var contentString = "<div><h2>" + info.city + "</h2></div>";
                var compiled = $compile(contentString)($scope);
                var infoWindow = new google.maps.InfoWindow({ content: compiled[0] });
                infoWindow.open($scope.map, marker);
                activeInfoWindow = infoWindow;
            }); 

            google.maps.event.addListener(marker, 'mouseover', function() {
                var contentString = "<div><h2>" + marker.popup + "</h2></div>";
                var compiled = $compile(contentString)($scope);
                var infoWindow = new google.maps.InfoWindow({ content: compiled[0] });
                infoWindow.open($scope.map, marker);

                activeInfoWindow2 = infoWindow;

                if(activeInfoWindow != null)
                activeInfoWindow.close();
            });     

            google.maps.event.addListener(marker, 'mouseout', function() {
                if(activeInfoWindow2 != null)
                activeInfoWindow2.close();
            });

            $scope.markers.push(marker);
        }
        createMarker(cities[i]);
        iconCounter++;
    }

    $scope.openInfoWindow = function(e, selectedMarker) {
        e.preventDefault();
        google.maps.event.trigger(selectedMarker, 'click');
    }
});

Here is the screenshot of the result

This is the static code when i'm placing php code in cities and popup section to not showing the result.

Problem is when i don't how to call php code in angularJS. Kindly help me.

Thanks in advance.

1- You probably would need to use a framework to handle JSON serialization for you.

For the sake of simplicity you can use this library (https://github.com/mevdschee/php-crud-api), and copy api.php to the server root directory.

2- Using $http:

investup.controller('MapCtrl', function($scope, $compile, $http) {
    $http.get('/api.php/cities').success(function(response) {
        var cities = response.cities;
        // the rest of controller function body
    }).catch(handleError);
})