We're migrating our Angular app to Webpack, and we had some problems with Angular Google Maps.
The last one is the custom InfoWindow we are defining in our map.
Before (with gulp) the code was working, and the definition of the marker was:
angular.forEach(sidemap.ads, function (ad) {
var marker = {
id: ad.id,
latitude: ad.gps.latitude,
longitude: ad.gps.longitude,
options: {
labelClass: 'marker-label',
labelAnchor: '15 28',
labelContent: ad.price + sidemap.currency,
icon: '../../../../assets/png/marker.png'
},
show: false,
templateUrl: '../../../../modules/ads-search/offers/map/ad.map.html',
templateParameter: ad
};
sidemap.markers.push(marker);
});
When we migrated to Webpack, we changed templateUrl to template with a require:
angular.forEach(sidemap.ads, function (ad) {
var marker = {
id: ad.id,
latitude: ad.gps.latitude,
longitude: ad.gps.longitude,
options: {
labelClass: 'marker-label',
labelAnchor: '15 28',
labelContent: ad.price + sidemap.currency,
icon: require('../../assets/png/marker.png')
},
show: false,
template: require('../../modules/ads-search/offers/map/ad.map.html'),
templateParameter: ad
};
sidemap.markers.push(marker);
});
The marker appears correctly in the map, but when trying to click on it, we get a Uncaught TypeError: Cannot read property 'nodeType' of undefined in the createInfoBoxDiv_ function of Angular Google Maps.
I think it's probably related to the template parameter, it seems that the template parameter exists in the definition but we must be doing wrong obviously, because it's not working.
Any ideas?
Related
What happened past weeks i don't know if google messed things up again. My map stopped working.
I transferred the app Angular for routes. When the contact page loads, initializeMap function called.
I got new browser api key from google console which is not like old. I enabled Javascript Map Api. I entered my URLs in credential.
Sometimes it gives error invalidkey*** but only sometimes.
It works on my domain if i put everything in one single file.
It also works on codepen. I don't know why? There is no error to debug this thing. My beloved javascript.
http://codepen.io/emrahatilkan/pen/bVwzrR
Edit: This is about angular definitely.
Google Map Link in index.html:
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY"></script>
My URL: index.html/#/contact
I don't know if it is relevant but contact.html is inside pages/ folder.
My Code is in main.js:
function initializeMap() {
console.log('init map'); //this outputs to console
var mapOptions = {
center: { lat: 39.7944417, lng: 30.4935026 },
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: false,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Some Title'
});
var infowindow = new google.maps.InfoWindow({
content: '<h5>Some Title</h5>'
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
$scope.map = {
center: {
latitude: 36,
longitude: -80
},
zoom: 3,
showOverlay: true,
events: {
"click": function ()
{ console.log(" latitude: " + $scope.map.center.latitude + "longitude: " + $scope.map.center.longitude); }
},
options: {
streetViewControl: false,
panControl: false,
maxZoom: 20,
minZoom: 1,
}
}
So I have a problem to get the longitude and latitude of my mouse click event using angularJS and the google map api v3. Here is an example of my controller. I've added an event to the map so to get the cordinates, but now what i'm getting is just the cordinates of the center. I don't have any idea how to get the exact cordinates of my mouse click event. Thanks for your help.
You must implement a listener that catches the click and gets location:
google.maps.event.addListener(map, 'click', function(event) {
alert(event.latLng); // in event.latLng you have the coordinates of click
});
Check this DEMO FIDDLE
The click event in Angular and google maps v3 returns three objects: instance, eventName, handler.
The third one has latLong with lat(), lng() functions.
So you can get latitude by handler[0].latLng.lat().
There is also a useful pixel object with position attributes x,y of the clicked point.
If you are using angular why wont you use its directive for maps.
ngMap
I am using google maps via angularJS (using angular-google-map)
I have a marker with an InfoWindow which works fine except on iOS. When I rotate the device, the google map API doesn't seem to calculate the size well and the infoWindow is too small for its content. I reckon this is the same bug as this one
So I have been trying to access the InfoWindow object to close it and open it again to force google to redraw/recalculate but couldn't find a way to access it.
I can access the google.maps.Map object by using $scope.map.control.getGMap() in angular but can't access the InfoWindow. I can see a getGWindows in Window.prototype but no idea how to access it from the map. I can access the markers as well but they don't have a reference to their infowindow.
Here is the way I create the marker in case it can be of any help:
var marker = {
id: obj.id,
name: obj.name,
latitude: obj.lat,
longitude: obj.lng,
address: obj.address,
suburbCity: obj.suburbCity,
state: obj.state,
postcodeZip: obj.postcodeZip,
icon: "xxx.png"),
options: {
labelContent: obj.name,
labelClass: "none",
labelAnchor:"25 0",
opacity: 0.25,
animation: google.maps.Animation.DROP,
visible: true
},
templateurl:'markerwindow.tpl.html',
templateparameter: data,
closeClick: function() {
marker.options.visible = false;
return $scope.$apply();
},
onClicked: function() {
navigateToMarkerOnMap(marker);
}
};
$scope.map.markers.push(marker);
function navigateToMarkerOnMap(marker) {
$scope.selected.options.visible = false;
$scope.selected = marker;
$scope.selected.options.visible = true;
}
I'm using Angular-leaflet-directive. I have a menu where the user taps an option. Each time the user clicks an option the map is updated with two new markers and the bounds should be adjusted so these markers are both visible. The markers get updated but the bounds seem to work differently. The first time the user clicks something the bounds are updated, but they don't update for each time after that. This is the code which is called each time the user selects an option:
var updateMap = function() {
setDirections();
$scope.bounds = leafletBoundsHelpers.createBoundsFromArray([
[$scope.thisPractice.end.k, $scope.thisPractice.end.D],
[$scope.thisPractice.start.k, $scope.thisPractice.start.D]
]);
$scope.markers = {
end: {
title: "Destination",
lat: $scope.thisPractice.end.k,
lng: $scope.thisPractice.end.D,
focus: true,
icon: local_icons.markerRed
},
start: {
title: "Start",
lat: $scope.thisPractice.start.k,
lng: $scope.thisPractice.start.D,
}
}
}
This is my map initialization code:
// Initialize the map
angular.extend($scope, {
center: {},
bounds: {},
paths: {},
markers: {},
scrollWheelZoom: false,
layers: {
baselayers: {
googleRoadmap: {
name: 'Google Streets',
layerType: 'ROADMAP',
type: 'google'
}
}
}
});
This is the HTML where my map occurs:
<div id="map_canvas">
<leaflet id="leaflet_map" bounds="bounds" center="center" markers="markers" paths="paths" height="300px" width="100%" layers="layers"></leaflet>
</div>
It's not an issue with my data since the markers are updated fine. Any ideas? It seems weird that the bounds wouldn't function in the same way as the markers do.
Edit:
So the following code utilises the standard Leafleat.js functions and works:
var bounds = L.latLngBounds([$scope.thisPractice.end.k, $scope.thisPractice.end.D], [$scope.thisPractice.start.k, $scope.thisPractice.start.D])
leafletData.getMap().then(function(map) {
map.fitBounds(bounds);
});
It would be nice if the angular directive implemented fitbounds in the same way.
After adding Leaflet to my AngularJS app:
<leaflet id="map" defaults="defaults" center="center" bounds="bounds" controls="controls" event-broadcast="events"></leaflet>
And setting it up:
// Initialise the feature group to store editable layers
var drawnItems = new L.FeatureGroup();
// Initialise the draw control
var drawControl = new L.Control.Draw({
position: 'topright',
edit: {
featureGroup: drawnItems
}
});
// Configure Leaflet
angular.extend($scope, {
defaults: {
zoomControlPosition: 'topright',
minZoom: 3,
tileLayerOptions: {
detectRetina: true,
reuseTiles: true,
attribution: 'OpenStreetMaps'
}
},
center: {},
controls: {
custom: [drawControl]
},
events: {
map: {
enable: ['click']
}
}
});
Following this code it doesn't get evaluated (no error shown though):
leafletData.getMap().then(
function (map) {
alert('I have accessed the map.');
}
);
This should show me an alert straight away, although nothing happens.
If I delay this previous code, for example, running it in a function on a button click, it works!
Does anyone knows what could be a problem?
Seeing example, it should work: https://github.com/tombatossals/angular-leaflet-directive/blob/master/examples/control-draw-example.html
PARTLY SOLVED
Removing ID from leaflet HTML tag solved the problem. Must be a bug.
You are supposed to pass the id specified in the <leaflet> tag to getMap() function.
In your example, the id is map. You would pass it like this:
leafletData.getMap("map").then(
function (map) {
alert('I have accessed the map.');
}
);