Google maps using angular js

Question

I'm trying to do google maps with angular js without using the 'uiGmapgoogle-maps' and I'm unable to get the map using the scope.Where as I"m able to achieve this using plain js.May I know where I'm doing the mistake?

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
     $scope.googleMap = function() {
     alert()
        $scope.mapOptions1 = {
            center: new google.maps.LatLng(51.508742, -0.120850),
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        $scope.map1 = new google.maps.Map(document.getElementById("googleMap1"), $scope.mapOptions1);
        return map1;

    }
});

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>

 <div id="googleMap1" ng-model="googleMap()" style="width:100%;height: 228px;"></div>
</div>

SAMUEL · Accepted Answer · 2017-07-10 07:53:50Z

1

If I understand you correctly following corrected snippet will help you

You need to use ng-init to perform a function instead of ng-model

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.googleMap = function() {
    $scope.mapOptions1 = {
      center: new google.maps.LatLng(51.508742, -0.120850),
      zoom: 9,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    $scope.map1 = new google.maps.Map(document.getElementById("googleMap1"), $scope.mapOptions1);
    return $scope.map1;

  }
});

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    First Name: <input type="text" ng-model="firstName"><br>

    <div id="googleMap1" ng-init="googleMap()" style="width:100%;height: 228px;"></div>
  </div>

edited Jul 10, 2017 at 7:53

answered Jul 10, 2017 at 7:43

SAMUEL

8,6223 gold badges46 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hema Nandagopal Over a year ago

I tried to run your codes,its throwing some errors, can you check it?

SAMUEL Over a year ago

I just performed some modification ie the return value of $scope.googleMap function is change. pls have a look

Hema Nandagopal Over a year ago

Okay,got it :) That's great.Thank you.

Collectives™ on Stack Overflow

Google maps using angular js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related