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!

Google-maps geocoding service

Hi I'm using google documentation in geocoding service.
The script should display the location Casablanca but it still show the default location in austalia
The problem is that geocoder.geocode(...) is not executed
function initMap() {
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
scrollwheel: false,
zoom: 8,
});
codeAddress(geocoder,map);
}
function codeAddress(geocoder, map)
{
var addr = "Casablanca";
geocoder.geocode( {'addr':addr}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.addr);//center the map over the result
//place a marker at the location
var marker = new google.maps.Marker(
{
map: map,
position: results[0].geometry.addr
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
PS:
I'm using GooglMapper https://github.com/bradcornford/Googlmapper
I appreciate any help.

geocoder.geocode( {'addr':addr}, function(results, status)
Should be:
geocoder.geocode( {'address':addr}, function(results, status)
The GeocoderRequest object literal contains the following fields:
{
address: string,
location: LatLng,
placeId: string,
bounds: LatLngBounds,
componentRestrictions: GeocoderComponentRestrictions,
region: string
}
Taken from the documentation

Answer For my problem
map.setCenter(results[0].geometry.addr);
Should be
map.setCenter(results[0].geometry.location);
And
position: results[0].geometry.addr
Should Be
position: results[0].geometry.location

when applying styles to icons on fusion table, getting unexpected identifier

Have a map that I made using Google Maps API and Fusion Tables. I am trying to change the appearance of the markers on the map.
When I add the "styles", https://developers.google.com/maps/documentation/javascript/fusiontableslayer my map will not load on the page, and I get an error in my console reading: "unexpected identifier - styles"
Can someone help me figure out what I am doing wrong?
Here is my code:
var map, layer;
var geocoder;
function initialize(location) {
console.log(location);
geocoder = new google.maps.Geocoder();
var userlocation = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: userlocation,
zoom: 8
});
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'Geocodable address\'',
from: '1x265dMvUClEGEVHD_3VRBvSRXk-mbs4jcO2xy29K',
}
styles: [
{markerOptions:{ iconName:"star"}}
]
});
layer.setMap(map);
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
navigator.geolocation.getCurrentPosition(initialize);

I believe you're missing a comma before styles
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'Geocodable address\'',
from: '1x265dMvUClEGEVHD_3VRBvSRXk-mbs4jcO2xy29K',
}, //need a comma here
styles: [{...

You are missing a "," before styles:
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'Geocodable address\'',
from: '1x265dMvUClEGEVHD_3VRBvSRXk-mbs4jcO2xy29K',
},
styles: [
{markerOptions:{ iconName:"star"}}
]
});

How to add marker to google map using geocomplete.js

I am using geocomplete.js for my google map. Also twitter bootstrap.
Currently I have a button:
<button id="btn-pin" type="button" class="btn btn-primary">PIN</button>
This button is to pin the marker on the map on the position I want (Latlng provided)
My js function to call on click when the button is click:
$("#btn-pin").on('click', function() {
var myLatlng = new google.maps.LatLng(1.294400,103.849339);
$("#btn-pin").geocomplete({
map: ".map_canvas",
mapOptions: {
scrollwheel: true
},
markerOptions: {
draggable: true,
position: myLatlng,
map: ".map_canvas"
},
});
});
My map id in a the div:
<div class="map_canvas"></div>
So whenever the button pin is clicked, my map div just greys out.
Is there something wrong with my code? I tried to follow google map API and other articles on the internet as closely as possible and this is the best I could get..

I fixed my JS and it worked
The JS:
$("#btn-pin").on('click', function() {
var setloc = new google.maps.LatLng(1.294400,103.849339);
$("#btn-pin").geocomplete({
map: ".map_canvas",
details: "form",
location: setloc,
mapOptions: {
scrollwheel: true,
maxZoom: 16
},
markerOptions: {
draggable: true
}
});
});

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. :)