We Keep Coding

ERROR TypeError: Cannot read property '__e3_' of undefined

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!

Hide full screen control of google map charts

Hello I am using google map charts available in google visualization chartsGoogle Map Chart. But there is no way we can hide the full screen control symbol appears in top-right position. Available options can be seen here. I have also tried to use fullscreenControl: false option given on official google map api documentation fullscreenControl but that did not work for me. Please suggest how to disable this options on mobile/ionic apps.
this.element = this.el.nativeElement;
let mapOptions = {
showTooltip: true,
tooltip: { isHtml: true },
mapType: 'satellite',
useMapTypeControl: true,
fullscreenControl: false
};
let data = [
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
];
dataTable = google.visualization.arrayToDataTable( data );
this.map = new google.visualization.Map(this.element);
this.map.draw( dataTable, mapOptions );
Thanks in advance

Below code working for me in Ionic app, You can try this:
declare var google; // declare this var above #Component({}) with your other imports
directionsDisplay = new google.maps.DirectionsRenderer;
#ViewChild('map') mapElement: ElementRef;
map: any;
this.map = new google.maps.Map(this.mapElement.nativeElement, {
zoom: 15,
center: this.maplocation, // this.maplocation={lat:'',long:''} is my Lat,Long values
fullscreenControl: false
});
this.directionsDisplay.setMap(this.map);
new google.maps.Marker({
position: this.maplocation,
map: this.map
});
In HTML :
<ion-content>
<div #map id="map"></div>
</ion-content>

google maps pin api v3

I have got a google map loading on my website using the api. I have styled it how I would like but I need to add a pin with custom image to a location on my map. The center co-ordinatres are different of those that I would like to use for the pin. I have tried using the code supplied in the google api docs but cannot seem to get it to work. below is the code I am using now without the pin code as it wasn't working. Would someone be able to tell me what to add to get the pin working for an image file called:
'pin.png'
and the co-ordinates:
51.4531807,-2.1864739,17
here is my current JS
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
var map = new google.maps.Map(mapElement, mapOptions);
var office = new google.maps.LatLng(51.4477764,-2.2015512);
var marker = new google.maps.Marker({
position: office,
map: map
});
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 17,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(51.4476895, -2.2057354), // New York
draggable: false,
zoomControl: false,
scrollwheel: false,
disableDoubleClickZoom: true,
streetViewControl: false,
disableDefaultUI: true,
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [ { featureType:'water', elementType:'all', stylers:[ {hue:'#bbbbbb'}, {saturation:-100}, {lightness:-4}, {visibility:'on'} ] },{ featureType:'landscape', elementType:'all', stylers:[ {hue:'#999999'}, {saturation:-100}, {lightness:-33}, {visibility:'on'} ] },{ featureType:'road', elementType:'all', stylers:[ {hue:'#999999'}, {saturation:-100}, {lightness:-6}, {visibility:'on'} ] },{ featureType:'poi', elementType:'all', stylers:[ {hue:'#aaaaaa'}, {saturation:-100}, {lightness:-15}, {visibility:'on'} ] },{
featureType: 'poi.business',
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using out element and options defined above
}

The code to display the pin on the map was correct however this was outside of where the map is accessible. To rectify this issue the code had to be put after the map and before the closing bracket as displayed by #Dr.Molle
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);
var hadston = new google.maps.LatLng(51.4477764,-2.2015512);
var marker = new google.maps.Marker({
position: hadston,
map: map,
clickable: false,
icon: 'pin.png'
});
}
To display a custom pin I used icon with a direct link to the image.
icon: 'pin.png'

Showing visitors locations in Google Maps via JS

So, I have a JavaScript code that shows a map, and my location. It also has a few extra settings applied to it. My question is, looking at the following JS code, and using the GoogleMaps API here: http://maps.googleapis.com/maps/api/js?sensor=false, is there any way to show the visitors locations on this map?
I am trying t build a virtual site view GeoLocator. That shows the locations of all my sites viewers. Or, maybe there is a plugin online.
var map;
function initialize() {
var options =
{
zoom: 2,
center: new google.maps.LatLng(geoip_latitude(), geoip_longitude()),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions:
{
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
poistion: google.maps.ControlPosition.TOP_RIGHT,
mapTypeIds: [google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.SATELLITE]
},
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.ZOOM_PAN
},
scaleControl: true,
disableDoubleClickZoom: true,
draggable: true,
streetViewControl: true,
draggableCursor: 'move'
};
map = new google.maps.Map(document.getElementById("map"), options);
// Add Marker and Listener
var latlng = new google.maps.LatLng(geoip_latitude(), geoip_longitude());
var marker = new google.maps.Marker
(
{
position: latlng,
map: map,
title: 'Click me'
}
);
var infowindow = new google.maps.InfoWindow({
content: 'You Are Here'
});
google.maps.event.addListener(marker, 'click', function () {
// Calling the open method of the infoWindow
infowindow.open(map, marker);
});
}

Well, that's possible... you would need a server to send this information to (which you would have to set up on the page that the viewers visit), that would find their IP and lookup their long/lat on an IP database, if that IP is known (that information is not always there and not necessarily accurate, if it is). Then you would need to have an interface that gets the long/lat values from this database and displays them on the map with markers, as I described on my comment.
Of course, you can also just use Google Analytics (google.com/analytics) where all of this is done for you. :)

Google Maps Autocomplete List

I wonder whether someone may be able to help me please.
I'm using the code below to perform an Google Maps Autocomplete action upon a user entering address details:
// JavaScript Document
var geocoder;
var map;
var marker;
function initialize(){
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(54.312195845815246, -4.45948481875007),
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_LEFT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
}
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
draggable: true
});
}
$(document).ready(function() {
initialize();
$(function() {
$("#address").autocomplete({
//This bit uses the geocoder to fetch address values
source: function(request, response) {
geocoder.geocode( {'address': request.term }, function(results, status) {
response($.map(results, function(item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}));
})
},
//This bit is executed upon selection of an address
select: function(event, ui) {
$("#osgb36lat").val(ui.item.latitude);
$("#osgb36lon").val(ui.item.longitude);
var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
marker.setPosition(location);
map.setZoom(16);
map.setCenter(location);
}
});
});
google.maps.event.addListener(marker, 'dragend', function() {
geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$('#address').val(results[0].formatted_address);
$('#osgb36lat').val(marker.getPosition().lat());
$('#osgb36lon').val(marker.getPosition().lng());
var point = marker.getPosition();
map.panTo(point);
}
}
});
});
})
and this is how I place it within my form.
<div>
<input name="address" type="text" id="address" size="40" maxlength="40" style="font:Calibri; font-size:12px" />
</div>
What I'd now like to be able to do is limit the number of items viewable in the list. I've done some research on several forums and on the Google Maps site but I can't seem to find a solution, so I'm not even sure whether this is possible.
I just wondered whether someone could possibly have a look at this please and provide a little guidance on how I may be able to go about this.
Many thanks and kind regards

The Google Maps V3 API now incudes an autocomplete feature that will adapt any text input field to autocomplete locations &/or Places. It doesn't show thumbnails yet but the addition of Places will be great for some use cases, here's the details:
Documentation: http://code.google.com/apis/maps/documentation/javascript/places.html#places_autocomplete
Reference: http://code.google.com/apis/maps/documentation/javascript/reference.html#Autocomplete
Example: http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html
I think these will help you.....

After some further research, I found a great tutorial here: http://rjshade.com/2012/03/27/Google-Maps-autocomplete-with-jQuery-UI/ which I've been able to adapt.