Mixing
How to fix “InvalidValueError” in Angular 6
I'm using Angular 6 to initiate google map with directions using Google Maps directions API. After I implement the code. the console says the following error:
Uncaught (in promise)
Jc {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Jc (https://maps.googleapis.com/m…F5xxXLWf2ZqIDEfUDitY7Ncs&callback=initMap:123:108"}
message
:
"initMap is not a function"
name
:
"InvalidValueError"
home.component.ts :
import { Component, OnInit } from '@angular/core';
declare var google: any;
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['../../resources/css/style.min.css', '../../resources/css/bt.min.css']
})
// declare var calculateAndDisplayRoute(directionsService, directionsDisplay) : any;
export class HomeComponent implements OnInit {
initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
directionsDisplay.setMap(map);
var onChangeHandler = function() {
this.calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: (<HTMLInputElement>document.getElementById('start')).value,
destination: (<HTMLInputElement>document.getElementById('end')).value,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
}
else {
window.alert('Directions request failed due to ' + status);
}
});
}
constructor() {
}
ngOnInit() {
this.initMap();
}
}
I have no idea why is this error message. Can anyone help?
angular google-maps asked Jan 1 at 12:04
David JohnsDavid Johns
10111
add a comment |
I'm using Angular 6 to initiate google map with directions using Google Maps directions API. After I implement the code. the console says the following error:
Uncaught (in promise)
Jc {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Jc (https://maps.googleapis.com/m…F5xxXLWf2ZqIDEfUDitY7Ncs&callback=initMap:123:108"}
message
:
"initMap is not a function"
name
:
"InvalidValueError"
home.component.ts :
import { Component, OnInit } from '@angular/core';
declare var google: any;
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['../../resources/css/style.min.css', '../../resources/css/bt.min.css']
})
// declare var calculateAndDisplayRoute(directionsService, directionsDisplay) : any;
export class HomeComponent implements OnInit {
initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
directionsDisplay.setMap(map);
var onChangeHandler = function() {
this.calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: (<HTMLInputElement>document.getElementById('start')).value,
destination: (<HTMLInputElement>document.getElementById('end')).value,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
}
else {
window.alert('Directions request failed due to ' + status);
}
});
}
constructor() {
}
ngOnInit() {
this.initMap();
}
}
I have no idea why is this error message. Can anyone help?
angular google-maps asked Jan 1 at 12:04
David JohnsDavid Johns
10111
Use AGM :: npmjs.com/package/@agm/core
– deepbchudasama
Jan 1 at 12:24
add a comment |
I'm using Angular 6 to initiate google map with directions using Google Maps directions API. After I implement the code. the console says the following error:
Uncaught (in promise)
Jc {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Jc (https://maps.googleapis.com/m…F5xxXLWf2ZqIDEfUDitY7Ncs&callback=initMap:123:108"}
message
:
"initMap is not a function"
name
:
"InvalidValueError"
home.component.ts :
import { Component, OnInit } from '@angular/core';
declare var google: any;
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['../../resources/css/style.min.css', '../../resources/css/bt.min.css']
})
// declare var calculateAndDisplayRoute(directionsService, directionsDisplay) : any;
export class HomeComponent implements OnInit {
initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
directionsDisplay.setMap(map);
var onChangeHandler = function() {
this.calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: (<HTMLInputElement>document.getElementById('start')).value,
destination: (<HTMLInputElement>document.getElementById('end')).value,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
}
else {
window.alert('Directions request failed due to ' + status);
}
});
}
constructor() {
}
ngOnInit() {
this.initMap();
}
}
I have no idea why is this error message. Can anyone help?
angular google-maps asked Jan 1 at 12:04
David JohnsDavid Johns
10111
I'm using Angular 6 to initiate google map with directions using Google Maps directions API. After I implement the code. the console says the following error:
Uncaught (in promise)
Jc {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Jc (https://maps.googleapis.com/m…F5xxXLWf2ZqIDEfUDitY7Ncs&callback=initMap:123:108"}
message
:
"initMap is not a function"
name
:
"InvalidValueError"
home.component.ts :
import { Component, OnInit } from '@angular/core';
declare var google: any;
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['../../resources/css/style.min.css', '../../resources/css/bt.min.css']
})
// declare var calculateAndDisplayRoute(directionsService, directionsDisplay) : any;
export class HomeComponent implements OnInit {
initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
directionsDisplay.setMap(map);
var onChangeHandler = function() {
this.calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: (<HTMLInputElement>document.getElementById('start')).value,
destination: (<HTMLInputElement>document.getElementById('end')).value,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
}
else {
window.alert('Directions request failed due to ' + status);
}
});
}
constructor() {
}
ngOnInit() {
this.initMap();
}
}
I have no idea why is this error message. Can anyone help?
angular google-maps angular google-maps asked Jan 1 at 12:04
David JohnsDavid Johns
10111
asked Jan 1 at 12:04
David JohnsDavid Johns
10111
asked Jan 1 at 12:04
David JohnsDavid Johns
10111
asked Jan 1 at 12:04
David JohnsDavid Johns
10111
asked Jan 1 at 12:04
David JohnsDavid Johns
10111
10111
Use AGM :: npmjs.com/package/@agm/core
– deepbchudasama
Jan 1 at 12:24
add a comment |
Use AGM :: npmjs.com/package/@agm/core
– deepbchudasama
Jan 1 at 12:24
Use AGM :: npmjs.com/package/@agm/core
– deepbchudasama
Jan 1 at 12:24
Use AGM :: npmjs.com/package/@agm/core
– deepbchudasama
Jan 1 at 12:24
add a comment |
1 Answer
1
active
oldest
votes
Apparently this error occurs due to the presence of callback parameter while loading Google Maps JavaScript API:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Since your map is getting initialized via ngOnInit lifecycle method, the callback parameter could be abandoned from url.
Here is a demo which demonstrates how to utilize Google Maps Directions Service with Angular2+ application
answered Jan 2 at 16:30
Vadim GremyachevVadim Gremyachev
36.8k772115
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995280%2fhow-to-fix-invalidvalueerror-in-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Apparently this error occurs due to the presence of callback parameter while loading Google Maps JavaScript API:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Since your map is getting initialized via ngOnInit lifecycle method, the callback parameter could be abandoned from url.
Here is a demo which demonstrates how to utilize Google Maps Directions Service with Angular2+ application
answered Jan 2 at 16:30
Vadim GremyachevVadim Gremyachev
36.8k772115
add a comment |
Apparently this error occurs due to the presence of callback parameter while loading Google Maps JavaScript API:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Since your map is getting initialized via ngOnInit lifecycle method, the callback parameter could be abandoned from url.
Here is a demo which demonstrates how to utilize Google Maps Directions Service with Angular2+ application
answered Jan 2 at 16:30
Vadim GremyachevVadim Gremyachev
36.8k772115
add a comment |
Apparently this error occurs due to the presence of callback parameter while loading Google Maps JavaScript API:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Since your map is getting initialized via ngOnInit lifecycle method, the callback parameter could be abandoned from url.
Here is a demo which demonstrates how to utilize Google Maps Directions Service with Angular2+ application
answered Jan 2 at 16:30
Vadim GremyachevVadim Gremyachev
36.8k772115
Apparently this error occurs due to the presence of callback parameter while loading Google Maps JavaScript API:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Since your map is getting initialized via ngOnInit lifecycle method, the callback parameter could be abandoned from url.
Here is a demo which demonstrates how to utilize Google Maps Directions Service with Angular2+ application
answered Jan 2 at 16:30
Vadim GremyachevVadim Gremyachev
36.8k772115
answered Jan 2 at 16:30
Vadim GremyachevVadim Gremyachev
36.8k772115
answered Jan 2 at 16:30
Vadim GremyachevVadim Gremyachev
36.8k772115
answered Jan 2 at 16:30
Vadim GremyachevVadim Gremyachev
36.8k772115
36.8k772115
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995280%2fhow-to-fix-invalidvalueerror-in-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Use AGM :: npmjs.com/package/@agm/core
– deepbchudasama
Jan 1 at 12:24