We Keep Coding

Uncaught (in promise) TypeError: e.getDraggable is not a function

I am doing a map with google maps but I have this error
markerclusterer.ts:818 Uncaught (in promise) TypeError: e.getDraggable is not a function
at r.value (markerclusterer.ts:818)
at r.value (markerclusterer.ts:801)
at new r (markerclusterer.ts:345)
at initMap (VM2170 map:82)
at js?key=&callback=initMap:142
at js?key=&callback=initMap:142
I get the cities from my database and I use the api google geocoder.geodecode to get coordinates from the cities. Ater that I use markercluster to make clusters but it doesn't work. I think it is because it expects another format than the one given by geodecode.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 48.856614, lng: 2.3522219}
});
map.setOptions({draggable: true});
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
//var markers = locations.map(function(location) {
// return new google.maps.Marker({
// position: location,
// });
//});
//console.log(markers);
var geocoder = new google.maps.Geocoder();
var list = cityslist.map(function(city, i){
return new geocoder.geocode({'address': city}, function(results, status) {
if (status === 'OK') {
console.log(results);
console.log(results[0].geometry.bounds['Ya']['i']);
console.log(results[0].geometry.location.lat);
var abc = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
});
return abc;
};
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, list,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
document.getElementById('submit').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
}

Use initialized Google Maps in other .js

I've two diffrent .js-files: scripts.js and search.js
In script.js the Google Maps is initialized:
function initMap() {
var mapDiv = document.getElementById('market-map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 12345, lng: 12345},
zoom: 8
});
}
It's working fine.
But I need this map in search.js as a variable, so I can work with this map in search.js (add Geocoder etc.)
Does anyone know a solution, how I can fix this problem?
Thanks for your help. :)

You just have to set map as a globale variable
var map = null;
function initMap() {
var mapDiv = document.getElementById('market-map');
map = new google.maps.Map(mapDiv, {
center: {lat: 12345, lng: 12345},
zoom: 8
});
}
Then, search.js will access to it.

Google Maps containsLocations throws Uncaught TypeError

I have what I believe to be very simple code. I draw a polygon, a marker and then throw an alert if the point I have hard-coded is within the polygon. Yet when I run this I get an 'Uncaught TypeError: Cannot call method 'lng' of undefined' error in the console.
My code is as follows:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(38.990842,-76.93625),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var box = [new google.maps.LatLng(38.9913160,-76.937079),
new google.maps.LatLng(38.991333,-76.936119),
new google.maps.LatLng(38.990287, -76.936108),
new google.maps.LatLng(38.990278,-76.937057),
new google.maps.LatLng(38.990495,-76.937052),
new google.maps.LatLng(38.990499,-76.936424),
new google.maps.LatLng(38.991091,-76.93643),
new google.maps.LatLng(38.991104,-76.937079)
];
var mPoint = [new google.maps.LatLng(38.991300,-76.936165)];
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(38.991300,-76.936165),
//position: new google.maps.LatLng(mPoint),
draggable: true
});
var AVpoly = new google.maps.Polygon({path:box,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4});
AVpoly.setMap(map);
marker.setMap(map);
if(google.maps.geometry.poly.containsLocation(google.maps.LatLng(38.990842,-76.93625), box) == true) {
alert("yes");
}
}
I cannot see anything wrong with this nor do I see why the alert if not firing. I did even change it to false in the off-chance my geometry was wrong....

Box is not a google.maps.Polygon; it is an array of google.maps.LatLng objects. Use AVpoly instead (the documentation specifies the second argument is a Polygon).
That doesn't work, you are also missing the "new" for the google.maps.LatLng constructor. This does work (using the marker.getPosition method which returns a google.maps.LatLng):
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(38.991300,-76.936165),
draggable: true
});
var AVpoly = new google.maps.Polygon({path:box,
map: map,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4});
if(google.maps.geometry.poly.containsLocation(marker.getPosition(), AVpoly) == true) {
alert("yes");
}
Working (if annoying) example

Google Maps Javascript API "Uncaught Type Exception - undefined is not a function"

I'm trying to show a custom map using the Google Maps Javascript API. In particular, I'm trying to show it using a couple of jquery scripts to allow rotation of the map. I'm not sure if that part is relevant.
When running the code using standard Google Map data (ie, tiles of Earth), it works fine. So here is my map-creation code:
// Standard google map
var map = new google.maps.Map2(document.getElementById('map'));
map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
This works fine. However, when I try to use a custom map, feeding it my own tiles (which I have already achieved in another project, without map rotation), I get "undefined is not a function". Here is the code that has been added to use custom tiles instead of standard Google Maps data:
google.load("maps", "2.x");
var customTypeOptions = {
getTileUrl: function (coord, zoom) {
var normalizedCoord = getNormalizedCoord(coord, zoom);
if (!normalizedCoord) {
return null;
}
var bound = Math.pow(2, zoom);
return "http://MYTILESURL/" + zoom + "/" + normalizedCoord.x + "/" + (bound - normalizedCoord.y - 1) + ".jpg";
},
tileSize: new google.maps.Size(256, 256),
maxZoom: 3,
minZoom: 0,
radius: 1024,
name: 'custom'
};
var customMapType = new google.maps.ImageMapType(customTypeOptions);
and then in my initialize() function:
// Custom map
var myLatlng = new google.maps.LatLng(0, 0);
var myOptions = {
center: myLatlng,
zoom: 0,
streetViewControl: false,
mapTypeControlOptions: {
mapTypeIds: ['custom']
}
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
map.mapTypes.set('custom', customMapType);
map.setMapTypeId('custom');
The error I'm getting is showing "line 46", which in my code is "tileSize: new google.maps.Size(256, 256),". I'm not sure, however, if the 46 reported here is the same 46 I'm reading, ie, the 46th line of the file.
Does anyone have any ideas why I'm getting this "undefined is not a function" error?

This is happening because google.maps.Size is being accessed before the GMap library has finished loading. Simply move anything that refers to google.maps inside your initialise function (or use the callback option in your google.load call to do the same thing).

Google Maps API v3 custom markers not appearing

I want to display on my website something similar to google maps transit directions, so I am trying to display multiple different types of directions on the same map. For exmaple, I want to show a trip where you walk to the bus, take the bus to some other street, and then walk to your final destination.
To do this, I am trying to get the result of multiple directions requests on the same map with custom markers. I have a function called change_map(), which is supposed to display the information for one of these trips on the map.
I have 2 problems:
the markers do not show up on the map.
when fitbounds is un-commented, I get a stack limit exceeded error
I am new to javascript, sorry if my code sucks and thanks for your help!
var trip_map
function renderDirections(result) {
var directionsDisplay = new google.maps.DirectionsRenderer;
directionsDisplay.setMap(trip_map);
directionsDisplay.suppressMarkers = true;
directionsDisplay.setDirections(result);
}
function requestDirections(start, end) {
var directionsService = new google.maps.DirectionsService;
directionsService.route({
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result) {
renderDirections(result);
});
}
function change_map(pk) {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
trip_map = new google.maps.Map(document.getElementById("trip_map"),
myOptions);
var bounds = new google.maps.LatLngBounds();
for (var j = 0; j < latlngpairs.length; j++) {
var GPS = new google.maps.LatLng({lat:latlngpairs[0],
lng:latlngpairs[1]});
var end_marker = new google.maps.Marker({position: GPS,
map: trip_map,
title: "Hello World!"});
bounds.extend(end_GPS);
}
requestDirections(parts[j], parts[j+1]);
}
//trip_map.fitBounds(bounds);
}

I believe the problem is that you are passing a single object as argument to the constructor of LatLng inside the loop
Change
var GPS = new google.maps.LatLng({lat:latlngpairs[0],lng:latlngpairs[1]});
with
var GPS = new google.maps.LatLng(latlngpairs[0],latlngpairs[1]);
Hope that solves it.