I'm using ion-segement in my project, I'm using the google map but I got this error:
ERROR TypeError: Cannot read property 'nativeElement' of undefined
here's the code :
#ViewChild('mapElement', { static: true }) mapNativeElement: ElementRef;
initMap() {
this.map = new google.maps.Map(this.mapNativeElement.nativeElement, {
zoom: 4,
disableDefaultUI: true,
center: { lat: 53.0000, lng: 9.0000 },
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
segmentChanged(event){
if(event.detail.value=== 'map'){
setTimeout(() =>
this.initMap()
,5000)
}
}
html:
<div *ngSwitchCase="'map'">
<div #mapElement class="map"></div>
</div>
Related
I'm developing a web app with angular 6. I integrated google maps but marker click event is returning me an error.
Help me, thanks in advance.
import { } from '#types/googlemaps';
#ViewChild('whereMap') gmapElement: any;
map: google.maps.Map;
marker: google.maps.Marker;
initMapp() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
let location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
this.map = new google.maps.Map(this.gmapElement.nativeElement, {
center: location,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
let marker = new google.maps.Marker({
position: location,
map: this.map,
draggable: true,
animation: google.maps.Animation.DROP,
title: 'Got you!'
});
});
google.maps.event.addListener(this.marker, 'click', () => {
console.log('marker clicked');
});
} else {
alert("Geolocation is not supported by this browser.");
}
}
}
map initialized and marker is working fine, but im unable to fire click event.
i have called the initMapp() in ngOnInit().
The navigator.geolocation.getCurrentPosition is asynchronous, you are likely meeting a race condition. You should move google.maps.event.addListener inside geolocation callback, otherwise you can try to assign event listener before the marker element was created.
Google Maps JavaScript API error message ERROR TypeError: Cannot read property '__e3_' of undefined typically means that you try to assign event to non-existing DOM element.
Try the following
initMapp() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
let location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
this.map = new google.maps.Map(this.gmapElement.nativeElement, {
center: location,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
this.marker = new google.maps.Marker({
position: location,
map: this.map,
draggable: true,
animation: google.maps.Animation.DROP,
title: 'Got you!'
});
google.maps.event.addListener(this.marker, 'click', () => {
console.log('marker clicked');
});
});
} else {
alert("Geolocation is not supported by this browser.");
}
}
I hope this helps!
I'm developing a Cordova App using Google Maps Javascript Directions API.
The Cordova google maps plugin does not support the Directions API, so Javascript is my last resort, to get the feature working.
I have tried it already with v=3, v=3.exp, and without any v soever, but no result.
Also, it does not make any difference, whether I include the script with an iOS, Android or Web-API Key, no change.
I took the demo from Google's developer documentation, all is working perfectly on Web, but not in my Cordova App with javascript :(
The Javascript included from googlemaps.com crashes with:
TypeError: undefined is not an object (evaluating 'd.defaultView')in common.js 3140:
if (d.defaultView && d.defaultView.getComputedStyle && (d = d.defaultView.getComputedStyle(c, null))) {
d = d.position || d.getPropertyValue("position") || "";
break a
}
This code is working flawlessly on web but not in a Cordova app:
<div id="map" style="width: 500px; height:500px;"></div>
<script>
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {
lat: 48.2265,
lng: 12.6758
}
});
directionsDisplay.setMap(map);
directionsService.route({
origin: 'Berlin, Germany',
destination: 'Vienna, Austria',
travelMode: 'WALKING',
waypoints: [{
location: {
lat: 51.339696,
lng: 12.373075
},
stopover: true
}, {
location: {
lat: 50.075538,
lng: 14.4378
},
stopover: true
}, {
location: {
lat: 48.30694,
lng: 14.28583
},
stopover: true
}]
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
I'm using angular google maps with ionic framework and trying to get coordinates on click. In view directive is injected like so
<ui-gmap-google-map center="map.center" zoom="map.zoom" dragging="true" options="map.options" events="map.events"></ui-gmap-google-map>
And here is my controller part
angular.extend($scope,
$scope.map = {
center: {latitude: 53.902407, longitude: 27.561621 },
zoom: 15,
options: {
maxZoom: 16,
minZoom: 13,
styles: mapStyles.bright
},
events: {
click: function (mapModel, eventName, originalEventArgs) {
$log.info("user defined event: " + eventName, mapModel, originalEventArgs);
var e = originalEventArgs[0];
var lat = e.latLng.lat(),
lon = e.latLng.lng();
console.log('You clicked here ' + 'lat: ' + lat + ' lon: ' + lon);
//scope apply required because this event handler is outside of the angular domain
$scope.$apply();
}
}
});
Event part is basically copy-pasted from examples in docs. However, when I click it, I get an error
Where did I go wrong?
UPD Somehow $scope.map.events is undefined, although I can, for instance, console.log it and see that it's defined before the error occurs. Same error is happening for all events. For example,
events: {
tilesloaded: function (map) {
$scope.$apply(function () {
$scope.mapInstance = map;
$log.info('tiles loaded');
});
}
}
returns
Uncaught TypeError: Cannot read property 'tilesloaded' of undefined
in console with the same stacktrace.
You have mixed two ways of bringing something into scope; assignment to scope and extending scope. Either extend the $scope with an object (ie not $scope.map =)
and your code becomes...
angular.extend($scope,{
map: {
center: {latitude: 53.902407, longitude: 27.561621 },
zoom: 15,
options: {
maxZoom: 16,
minZoom: 13,
styles: mapStyles.bright
},....
})
or use assignment to scope
$scope.map = {
center: {latitude: 53.902407, longitude: 27.561621 },
zoom: 15,
options: {
maxZoom: 16,
minZoom: 13,
styles: mapStyles.bright
},....
http://moduscreate.com/angularjs-tricks-with-angular-extend/
UPDATE: Code below is fixed as per accepted answer and is confirmed to be working.
I'm a bit stuck with Meteor, please help me out.
I've installed the dburles:google-maps package and got the map to show markers just fine.
Then I tried to display a heatmap and it's causing an error, I can't resolve - "Uncaught InvalidValueError: setMap: not an instance of Map(anonymous function)"
Console output can be seen here - http://improveit.meteor.com/map
Template.map.helpers({
issueMapOptions: function() {
// Make sure the maps API has loaded
if (GoogleMaps.loaded()) {
// Map initialization options
return {
zoom: 13,
center: new google.maps.LatLng(37.774546, -122.433523),
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControl: false,
panControl: false,
streetViewControl: false
};
}
}
});
Template.map.onCreated(function() {
// We can use the `ready` callback to interact with the map API once the map is ready.
GoogleMaps.ready('issueMap', function(issueMap) {
var issueData = [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.757676, -122.405118),
new google.maps.LatLng(37.757039, -122.404346),
new google.maps.LatLng(37.756335, -122.403719),
new google.maps.LatLng(37.755503, -122.403406),
new google.maps.LatLng(37.754665, -122.403242),
new google.maps.LatLng(37.753837, -122.403172),
new google.maps.LatLng(37.752986, -122.403112),
new google.maps.LatLng(37.751266, -122.403355)
];
var issueArray = new google.maps.MVCArray(issueData);
var heatMapLayer = new google.maps.visualization.HeatmapLayer({
data: issueArray,
radius: 20
});
heatMapLayer.setMap(issueMap.instance);
});
});
<template name="map">
<h1>Issue heat map</h1>
<p>This map will display issues and their severity</p>
<div class="map-container">
{{> googleMap name="issueMap" options=issueMapOptions}}
</div>
</template>
Change this line:
heatMapLayer.setMap(issueMap);
to
heatMapLayer.setMap(issueMap.instance);
The setMap method requires a google map instance. the callback of .ready does not directly provide this as it also has an options object for extra convenience.
I confirmed it works on your site:
Template.map.helpers({
issueMapOptions: function() {
// Make sure the maps API has loaded
if (GoogleMaps.loaded()) {
// Map initialization options
return {
zoom: 13,
center: new google.maps.LatLng(37.774546, -122.433523),
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControl: false,
panControl: false,
streetViewControl: false
};
}
}
});
Template.map.onCreated(function() {
// We can use the `ready` callback to interact with the map API once the map is ready.
GoogleMaps.ready('issueMap', function(issueMap) {
var issueData = [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.757676, -122.405118),
new google.maps.LatLng(37.757039, -122.404346),
new google.maps.LatLng(37.756335, -122.403719),
new google.maps.LatLng(37.755503, -122.403406),
new google.maps.LatLng(37.754665, -122.403242),
new google.maps.LatLng(37.753837, -122.403172),
new google.maps.LatLng(37.752986, -122.403112),
new google.maps.LatLng(37.751266, -122.403355)
];
var issueArray = new google.maps.MVCArray(issueData);
var heatMapLayer = new google.maps.visualization.HeatmapLayer({
data: issueArray,
radius: 20
});
heatMapLayer.setMap(issueMap.instance);
});
});
<template name="map">
<h1>Issue heat map</h1>
<p>This map will display issues and their severity</p>
<div class="map-container">
{{> googleMap name="issueMap" options=issueMapOptions}}
</div>
</template>
In a web page I have multiple google maps generated in a loop. And I am using the google directions api to display directions on each of the maps. The problem is that this code is displaying all the directions on the last map. Have any ideas?:
var currentPosition = new google.maps.LatLng(44.462691,26.1215866);
var directionsService = new google.maps.DirectionsService();
function DisplayLocations(){
$("#mapsContainer").empty();
for(var i=0;i<locationsDisplayed;i++){
var location=locationsArray[i];
$("#mapsContainer"+i).append('<div id="ImageMap'+i+'" style="width=250px;height:200px;"></div>');
var myOptions = {
zoom: 14,
center: currentPosition,
draggable: false,
zoomControl: false,
scrollwheel: false,
disableDoubleClickZoom: false,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById('ImageMap'+i),myOptions);
var request = {
origin: currentPosition,
destination: location.position,
travelMode: google.maps.TravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
RenderDirection(map,response);
}
});
}
}
function RenderDirection(map,result) {
var directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
directionsRenderer.setDirections(result);
}
Yes, your directionsService gets overwritten in the loop.
What you can do, is chain the requests. So, whenever a response returns, you trigger the next request.
<html>
<head>
<title>Javascript, multiple google maps on same page(Directions Renderer is not working as excepted)</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var maps = []; // we will copy (the reference to) every map to this array, so we can always access them at will
var locationsArray = [
{position: new google.maps.LatLng(44.460, 26.120) },
{position: new google.maps.LatLng(44.461, 26.121) },
{position: new google.maps.LatLng(44.462, 26.122) },
{position: new google.maps.LatLng(44.463, 26.123) }
]
var currentPosition = new google.maps.LatLng(44.462691, 26.1215866);
function DisplayLocations() {
$("#mapsContainer").empty();
nextLocation(0); // we don't use a for-loop; we wait for a response to trigger the next request
function nextLocation(i) {
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var location=locationsArray[i];
$("#mapsContainer"+i).append('<div id="ImageMap'+i+'" style="width=250px;height:200px;"></div>');
var myOptions = {
zoom: 14,
center: currentPosition,
draggable: false,
zoomControl: false,
scrollwheel: false,
disableDoubleClickZoom: false,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById('ImageMap'+i), myOptions);
maps.push(map);
var request = {
origin: currentPosition,
destination: location.position,
travelMode: google.maps.TravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
RenderDirection(maps[i++], response, directionsDisplay);
// if there is a next location, we will fire a new request
if (locationsArray[i]) {
nextLocation(i);
}
}
});
}
}
function RenderDirection(map, response, directionsDisplay) {
directionsDisplay.setMap(map);
directionsDisplay.setDirections(response);
}
google.maps.event.addDomListener(window, 'load', DisplayLocations);
</script>
<style>
.map {
height: 210px;
width: 260px;
float: left;
margin: 2px;
}
</style>
</head>
<body>
<div class="map" id="mapsContainer0"></div>
<div class="map" id="mapsContainer1"></div>
<div class="map" id="mapsContainer2"></div>
<div class="map" id="mapsContainer3"></div>
</body>