I'm using Angular UI Google Maps and am trying to get the latlng from where the map is clicked. Currently the map is returning a response, but without latlng. Please see my code below:
Controller
$scope.map = {
center: {
latitude: 45, longitude: -73
},
zoom: 8,
events: {
"click": function (event) {
console.log(event.latlng);
}
}
};
html
<ui-gmap-google-map events="map.events" center='map.center' zoom='map.zoom'></ui-gmap-google-map>
response from click:
Ln {gm_bindings_: Object, __gm: Wh, gm_accessors_: Object, mapTypeId: "roadmap", center: df…}__e3_: Object__gm: Whbounds: undefinedcenter: dfcontrols: Array[14]data: ghfeatures: UgetOptions: function () {gm_accessors_: Objectgm_bindings_: ObjectmapDataProviders: "Map data ©2014 Google"mapTypeId: "roadmap"mapTypes: DgmapUrl: "http://maps.google.com/maps?ll=45,-73&z=8&t=m&hl=en-US&gl=US&mapclient=apiv3"overlayMapTypes: lgstreetView: Uhtilt: 0tosUrl: "http://www.google.com/intl/en-US_US/help/terms_maps.html"uiGmap_id: "4b1e4213-59cd-4016-baac-2aa2af44fe1a"zoom: 8__proto__: c
If you need any more code please let me know.
Thanks
Turns out that the event will return it as an array from a third argument, please see fix below. I hope this helps someone :)
$scope.map = {
center: {
latitude: 45, longitude: -73
},
zoom: 8,
events: {
"click": function (event, a, b) {
console.log(a);
console.log(b);
}
}
};
Related
I am working with the rendering of Mapbox in Angular framework. Right now the issue what am facing is that I cannot load the map in the browser.
I have defined a function where I've given all the required to load the map and I am calling the function from an HTML div container after validating a condition. The control goes into the function but the error is that it is not identifying the container property of the map.
My HTML code:
<div id="map" style="margin-top: 370px;" *ngIf="result;then loadMap()">
my script:
loadMap(){
this.map=new Map({
container:document.getElementById('map') ,//'map'
style: 'mapbox://styles/mapbox/streets-v11',
center: { lng: -102.380979, lat: 35.877742 },
zoom: 9,
pitch: 20,
attributionControl: false
});
this.map.addControl(
new NavigationControl({
showZoom: true,
showCompass: true
}),
'bottom-right'
);
}
The error that I am facing:
Error: Invalid type: 'container must be a String or HTMLElement.
Error
Also, is it really possible to load map with a function call or am I just wasting my time here?
This is what i've been doing.I cannot give upon ngAfterViewInit because it is required for initialization purpose of the DOM.
export class DashboardComponent implements OnChanges,OnDestroy,AfterViewInit {
#Input() searchResults:SidenavComponent;
private map: Map;
constructor(){ }
ngOnChanges(changes:SimpleChanges){
if(!changes.searchResults){
console.log("Inside if");
console.log(changes.searchResults)
this.ngAfterViewInit()
}
// const preValue=changes['searchResults'].previousValue;
// const curValue=changes['searchResults'].currentValue;
// if(preValue!=curValue){
// this.ngAfterViewInit()
// }
}
ngAfterViewInit(){
this.map=new Map(
{
container:document.getElementById('map'),
style: 'mapbox://styles/mapbox/streets-v11',
center: { lng: -102.380979, lat: 35.877742 },
zoom: 9,
pitch: 20,
attributionControl: false
});
this.map.addControl(
new NavigationControl({
showZoom: true,
showCompass: true
}),
'top-right'
);
}
ngOnDestroy(){
this.map.remove();
}
}
The container property of the map<div id="map"> is available once the statement in *ngIf returns true / has completed. This is not the case as long as your loadMap() has not finished. Therefore you cannot identify the container.
--> The container needs to exist before you make the function call.
I have an overlay placed on a google map:
function CustomerMarker(map) {
this.Map = map;
this.setMap(map);
}
GoogleMap = new google.maps.Map(document.getElementById("map"), {
zoom: 16,
canZoom: false,
center: { lat: lat, lng: lng },
mapTypeControl: false,
streetViewControl: false,
scaleControl: false,
clickableIcons: false
});
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.onAdd = function () {
//Some code
};
CustomMarker.prototype.draw = function () {
//Some code
};
CustomMarker = new CustomMarker(GoogleMap);
Which works fine, and the overlay shows up, however is issue arises when I try to remove that
CustomMarker.setMap(null)
I get an error and the marker remains
Error: this.remove is not a function
pz#https://maps.googleapis.com/maps-api-v3/api/js/30/1/overlay.js:1:251
rk#https://maps.googleapis.com/maps-api-v3/api/js/30/1/overlay.js:2:476
_.pg.prototype.map_changed/<#https://maps.googleapis.com/maps/api
/js?key=AIzaSyBCiIPv6fgrRVn3veTJeP6ihfhrw8AXwbY:125:662
_.G#https://maps.googleapis.com/maps/api/js?key=AIzaSyBCiIPv6fgrRVn3veTJeP6ihfhrw8AXwbY:51:447
_.pg.prototype.map_changed#https://maps.googleapis.com/maps/api/js?key=AIzaSyBCiIPv6fgrRVn3veTJeP6ihfhrw8AXwbY:125:636
Db#https://maps.googleapis.com/maps/api/js?key=AIzaSyBCiIPv6fgrRVn3veTJeP6ihfhrw8AXwbY:37:103
_.k.set#https://maps.googleapis.com/maps/api/js?key=AIzaSyBCiIPv6fgrRVn3veTJeP6ihfhrw8AXwbY:101:728
_.jd/<#https://maps.googleapis.com/maps/api/js?key=AIzaSyBCiIPv6fgrRVn3veTJeP6ihfhrw8AXwbY:55:317
The documentation for OverlayView states:
You must implement three methods: onAdd(), draw(), and onRemove().
I don't see an implementation for onRemove.
I've been having a problem very similar to this
However that persons question was never answered and my situation is subtly different.
I'm trying to add a click event to my map that will change the center of the map to the location of the click. My code to do this works great, but it only works once and then when I click again I get this error:
angular-google-maps.js:6815 Uncaught TypeError: Cannot read property 'click' of undefined
Here is my map object:
vm.map = {
center: {
latitude: l.latitude,
longitude: l.longitude
},
zoom: 13,
events: {
click: function(map, event, coords) {
vm.map = {
center: {
latitude: coords[0].latLng.lat(),
longitude: coords[0].latLng.lng()
},
};
$scope.apply();
}
}
};
And here's my html:
<ui-gmap-google-map center="location.map.center" zoom="location.map.zoom" draggable="true" options="tabLocations.map.options" events=location.map.events>
<ui-gmap-search-box template="'scripts/components/tab-locations/searchbox.tpl.html'" events="location.map.searchbox.events" parentdiv="'searchbox-container'"></ui-gmap-search-box>
<ui-gmap-marker ng-if="location.active" idKey="1" coords="location" options="{draggable: false, icon: 'images/icons/gps-marker-active.svg'}"></ui-gmap-marker>
<ui-gmap-marker ng-if="!location.active" idKey="1" coords="location" options="{draggable: false, icon: 'images/icons/gps-marker-inactive.svg'}"></ui-gmap-marker>
</ui-gmap-google-map>
After your first click you are redefining a brand new map with no click event:
vm.map = {
center: {
latitude: coords[0].latLng.lat(),
longitude: coords[0].latLng.lng()
},
};
This is overriding all the previous properties you had set before, which includes click.
Use setCenter instead:
click: function(map, event, coords) {
var latLng = new google.maps.LatLng(latitude: coords[0].latLng.lat(), latitude: coords[0].latLng.lng());
vm.map.setCenter(latLng);
}
Reference: Google Maps API
I am trying to create dynamic markers to load information from my json file. For some reason, the json data never loads. When I try to load one marker, it works fine without the json data. I don't see what the error is. In the console, it says "TypeError: (intermediate value).error is not a function". Here is the code below.
html script link
<script src="https://maps.googleapis.com/maps/api/js?CLIENT ID HERE
&v=3.21&callback=initMap"
async defer></script>
External JS
var map;
function initMap() {
var myLatlng = {
lat: -25.363,
lng: 131.044
};
var centerZone = {
lat: 0,
lng: 0
};
map = new google.maps.Map(document.getElementById('map'), {
center: centerZone,
zoom: 3,
minZoom: 3
});
$.getJSON('data/data.json', function(data) {
$.each(data.markers, function(i, value) {
var myLatlng = new google.maps.LatLng(value.lat, value.lon);
alert(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: value.lon
});
});
}.error(function(words) {
alert(words);
}));
var secretMessages = ['This', 'is', 'the', 'secret', 'message'];
/*marker.addListener('click', function() {
map.setZoom(6);
map.setCenter(marker.getPosition());
attachSecretMessage(marker, secretMessages[0]);
});*/
function attachSecretMessage(marker, secretMessage) {
var infowindow = new google.maps.InfoWindow({
content: secretMessage
});
marker.addListener('click', function() {
infowindow.open(marker.get('map'), marker);
});
}
// google.maps.event.addDomListener(window, 'load', initMap);
}
json data
{
"markers": [
{
"id": "1",
"name": "Mesoamerica",
"lat": "-25.363",
"lon": "131.044",
"zoomLevel": "6"
}
]
}
The json data will have more objects inside, this is just a sample of how I want it.
You need to wait until the JSON data loads before doing anything with it. I suggest placing everything that relies on the JSON file in a $.done() function, like this:
$.getJSON('data/data.json').done(function(data){
//everything else
});
Your browser will continue with the other lines of code while it's waiting for the $.getJSON function to return the data. That's why you're getting the "not a function" error; you're trying to call a function on something that doesn't exist and JS doesn't know what to do with it. If you place everything in $.done(), those lines won't execute until the JSON data has successfully been retrieved.
I'm try to set map center using gmapjs. When I resize the window I get:
Uncaught TypeError: undefined is not a function
Here the map and the listener for the resize event:
$(function () {
var holder = $('#map-property'),
lat = 46.534820,
lng = 13.024809;
var map = new GMaps({
div: '#'+holder.attr('id'),
lat: lat,
lng: lng,
zoom: 14,
scrollwheel: false,
panControl : false,
streetViewControl: false,
mapTypeControl: false,
draggable: true,
disableDoubleClickZoom: true,
zoomControlOptions:{
style:google.maps.ZoomControlStyle.SMALL
}
})
.addMarker({
lat: 46.534820,
lng: 13.024809,
title: 'Da Matteo',
icon: "/img/gmaps-marker.png"
});
$(window).on('resize', function() {
map.setCenter(lat, lng); // here is the error!
});
});
AFAIK the setCenter function is:
this.setCenter = function(lat, lng, callback) {
this.map.panTo(new google.maps.LatLng(lat, lng));
if (callback) {
callback();
}
};
The problem is, map = new Gmaps().addMarker() returns a marker object, not a map. Therefore it has no setCenter method.
You can do something like:
var map = new Gmaps({...})
map.addMarker({...})
Then write the event.