CODEWITHSUNDEEP
javascriptangularjsjsongoogle-mapsgoogle-maps-api-3
coderprt
coderprt

Reputation: 11

Implement dynamic Google Maps Markers using Angular and HTTP

I am not really finding a solution for this, probably it is quite easy: So first of all I get my JSON with the following code:

testApp.controller("cat0Controller", function($scope, $http){

var url = "../../../Data/JSONs/randomdata_cat0.json";
$http.get(url).then(function(response){
    $scope.dataset = response.data;
    $scope.hi = response.status;
});
});

Displaying the Json data with ng-repeat in a html table works fine.

The JSON looks something like this:

[
 {
   "Lat": 16.374,
   "Long": 48.212,
   "Timestamp": "2017-01-07 / 13:31:56",
   "Downstream": 20.79852450876752,
   "Upstream": 20.87613636972708,
   "Category": 5
 },

So now I want to get the Latutude and Longitude values and display at these positions the Google Maps markers with a onClick Text with the Upstream, Downstream and timestamp.

My current HTML and Google Maps code you can find below:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
      <script src="../js/speedtestTestController.js"></script>

      <style type="text/css">
          html { height: 50% }
          body { height: 100%; margin: 0; padding: 0 }
          #map_canvas { height: 40%; width: 40%; }
      </style>


      <script type="text/javascript">



          function initialize() {
              var mapOptions = {
                  zoom: 11,
                  center: new google.maps.LatLng(48.209500, 16.370691),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              }
              var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

              var marker = new google.maps.Marker({
                  position: new google.maps.LatLng(48.209500, 16.370691),
                  animation:google.maps.Animation.Bounce,
                  map: map,
                //  icon: '../images/Speed.png'
              });

          }

          function loadScript() {
              var script = document.createElement("script");
              script.type = "text/javascript";
              script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyBv_SRg4EiNNN8RJZeQ_y78h2j804msLPA&sensor=true&callback=initialize";
              document.body.appendChild(script);

          }



          window.onload = loadScript;
      </script>




      </head>
  <body ng-app="testApp" >

  <div id="map_canvas" style="width:100%; height:100%"></div>



  </body>
    </html>

Do you have a solution for dynamically generate such markers from the JSON data?

Thanks in advance!

Upvotes: 1

Views: 981

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59368

Here is a sample that demonstrated how to load markers data from JSON file and display it on map:

angular.module('mapApp', [])

    .controller("mapCtrl", function ($scope, $http) {
        $scope.loadData = function () {
            var url = "https://gist.githubusercontent.com/vgrem/4c3db2767a4345e2f7b0ee711c38097d/raw/data.json";
            return $http.get(url).then(function (response) {
                return response.data;
            });
        };


        $scope.initMap = function (data) {
            var mapOptions = {
                zoom: 4,
                center: new google.maps.LatLng(48.209500, 16.370691),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

            data.forEach(function (item) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(item.Lat, item.Lng),
                    animation: google.maps.Animation.Bounce,
                    map: map
                });

            });
        };


        $scope.loadData()
            .then($scope.initMap);

    });
#map_canvas { 
    height: 420px; 
    width: 100%; 
}
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<div ng-app="mapApp" ng-controller="mapCtrl">
  <div id="map_canvas"></div>
</div>

Upvotes: 0

Related Questions