title: how to pull dynamic data from mysql to anguarJS then google map markers
body: <p>I am trying to pass dynamic data from mysql then creating multiple markers on google.</p>
  
  <p>Here is my html code.</p>
  
  <pre><code>&lt;div ng-app="mapsApp" ng-controller="MapCtrl"&gt;
      &lt;div class="map"&gt;
          &lt;div id="map" style="width: 100%;height:738px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the angularjs Script.</p>
  
  <pre><code>//Angular App Module and Controller
  var investup = angular.module('mapsApp', [])
  investup.controller('MapCtrl', function ($scope, $compile) {
      var cities = [
      {
          title: 'xyz',
          city : '&lt;img src="images/xxx.jpg" /&gt;',
          lat : 12.2917925,
          long : 76.6704174
      },
      {
          title: 'Add to Cart',
          city : '&lt;button class="org-btn" ng-click="cartone()" style="display:block;font-size:12px;margin:0 auto 0 auto;"&gt;Add to Cart&lt;/button&gt;',
          lat : 12.2725645,
          long : 76.6705986
      },
  ];
  
  //Define your locations: HTML content for the info window, latitude, longitude
  var popup = [
  ['&lt;img src="images/xyz.jpg" /&gt;'],
  ['&lt;img src="images/xyz.jpg"/&gt;'],
  ];
  
  // 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 &lt; 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 = "&lt;div&gt;&lt;h2&gt;" + info.city + "&lt;/h2&gt;&lt;/div&gt;";
                  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 = "&lt;div&gt;&lt;h2&gt;" + marker.popup + "&lt;/h2&gt;&lt;/div&gt;";
                  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');
      }
  });
  </code></pre>
  
  <p>Here is the screenshot of the result
  <a href="https://i.stack.imgur.com/hINng.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hINng.png" alt="enter image description here"></a></p>
  
  <p>This is the static code when i'm placing php code in cities and popup section to not showing the result.</p>
  
  <p>Problem is when i don't how to call php code in angularJS. Kindly help me.</p>
  
  <p>Thanks in advance.</p>