Develop Reference

Google Maps can't read property 'extend' of undefined after page load

I'm trying to increase page speed by loading my Google Maps two seconds after page load. While doing so, I keep on getting "Cannot read property 'extend' of undefined". I know there is some asynchronous loading going on but I'm not sure how to get it in proper order to get this map to load 2 seconds after the page is done. Any help is greatly appreciated.
Page Code:
<div id="mapCont"></div>
<script defer type='text/javascript' src='/js/maps.js'></script>
maps.js
$(window).bind("load", function() {
$.getScript('https://maps.googleapis.com/maps/api/js?key=key', function()
{
setTimeout(function(){
function doMap(callback) {
$("#mapCont").html('<div id="mapInfoManual" class="searchMap mb5"></div>');
callback();
}
doMap(function() {
initialize();
var map = null;
var markers = [];
var openedInfoWindow ="";
var bounds = new google.maps.LatLngBounds();
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(64.85599578876611, -147.83363628361917),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
map = new google.maps.Map(document.getElementById("mapInfoManual"),
mapOptions);
google.maps.event.addListener(map, 'zoom_changed', function() {
zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function(event) {
if (this.getZoom() > 20) // Change max/min zoom here
this.setZoom(18);
google.maps.event.removeListener(zoomChangeBoundsListener);
});
});
addMarker();
}
function addMarker() {
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markersArray.length; i++) {
CodeAddress(markersArray[i]);
}
}
// Address To Marker
function CodeAddress(markerEntry) {
var mytitle = (markersArray[i]['title']);
var myaddress = (markersArray[i]['address']);
var linkid = (markersArray[i]['linkid']);
var linkurl = (markersArray[i]['linkurl']);
var image = { url: '/images/MapPin.png', };
var lat = markerEntry['lat'];
var long = markerEntry['long'];
// var myLatLng = {lat: markerEntry['lat'], lng: markerEntry['long']};
var myLatlng = new google.maps.LatLng(parseFloat(lat),parseFloat(long));
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image
});
bounds.extend(marker.getPosition());
var infoWindowContent = "<div class='cityMapInfoPop'><span style='font-weight:700;'>"+ mytitle +"</span><br /><br />" + myaddress + "<br /><br /><a href='/center/" + linkurl + "/'>More Details</a></div>";
openInfoWindow(marker, infoWindowContent);
markers.push(marker);
map.fitBounds(bounds);
}
//Info Window
function openInfoWindow(marker, infoWindowContent) {
var infowindow = new google.maps.InfoWindow({
content: '<div class="cityMapInfoPop">' + infoWindowContent + '</div>'
});
google.maps.event.addListener(marker, 'click', function() {
if (openedInfoWindow != "") {
openedInfoWindow.close();
}
infowindow.open(map, marker);
openedInfoWindow = infowindow;
});
}
});
}, 2000);
});
});

The initial https://maps.googleapis.com/maps/api/js?key=key loads additional scripts that are not being captured by your implementation. The package, https://www.npmjs.com/package/#googlemaps/js-api-loader, enables the following pattern and is probably what you want:
import { Loader } from '#googlemaps/js-api-loader';
const loader = new Loader({
apiKey: "",
version: "weekly",
libraries: ["places"]
});
loader
.load()
.then(() => {
doMap();
initialize();
})
.catch(e => {
// do something
});
Alternative(use callback) if you want JQuery and your existing pattern:
window.callback = () => {
doMap();
initialize();
};
$(window).bind("load", function() {
$.getScript('https://maps.googleapis.com/maps/api/js?key=key&callback=callback', () => {}); // do nothing here
Also related: https://developers.google.com/maps/documentation/javascript/examples/programmatic-load-button

Cannot remove markers from google maps api

The markers in my program just wont remove with the deleteMarkers() function
CSS:
#map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
HTML:
<div style="height:500px; width:750px;">
<div id="map-canvas"></div>
</div>
<select class="form-control" name="dateSelect" id="dateSelect" onchange="dateSelect_Event();"></select>
Javascript:
var map; <--- global variables
var locations = [];
var lat_get = '';
var long_get = '';
var marker=[];
var infowindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {lat: 7.072617, lng: 125.599494},
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13,
});
};
function deleteMarkers() {
for (var i = 0; i < marker.length; i++ ) {
marker[i].setMap(null);
}
marker.length = 0;
}
function dateSelect_Event() {
deleteMarkers();
infowindow = new google.maps.InfoWindow({});
var locationsRef = firebase.database().ref("location");
locationsRef.on('child_added', function(snapshot) {
var data = snapshot.val();
marker = new google.maps.Marker({
position: {
lat: parseFloat(data.latitude),
lng: parseFloat(data.longitude)
},
map: map
});
marker.addListener('click', (function(data) {
return function(e) {
infowindow.setContent(this.getPosition().toUrlValue(6));
infowindow.open(map, this);
}
}(data)));
marker.setMap(map);
});
}
Firebase:
-databaseName
--location
---latitude
---longitude
I just use firebase to get the lat and long on every change of the html select option and it work perfectly. The problem this time is it can't delete the markers. Should I do the deleteMarkers differently?

Thanks to #StackSlave's answer. I was able to successfully remove it by creating and pushing the google_marker to the global marker variable.
function dateSelect_Event() {
deleteMarkers();
infowindow = new google.maps.InfoWindow({});
var locationsRef = firebase.database().ref("location");
locationsRef.on('child_added', function(snapshot) {
var data = snapshot.val();
var google_marker = new google.maps.Marker({
position: {
lat: parseFloat(data.latitude),
lng: parseFloat(data.longitude)
},
map: map
});
google_marker.addListener('click', (function(data) {
return function(e) {
infowindow.setContent(this.getPosition().toUrlValue(6));
infowindow.open(map, this);
}
}(data)));
marker.push(google_marker);
});
marker.setMap(map);
}

sorting marker in google map according to user location

I have a list of events that I display as markers on a map(its web application/site) and I would like to show only events in a certain distance (10 KM) from the user current location So, how can I combine this 2
//User Location
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(
function (position) {
var currentLatitude = position.coords.latitude;
var currentLongitude = position.coords.longitude;
// alert ("Latitude"+currentLatitude+"Longitude"+currentLongitude);window.mapServiceProvider(position.coords.latitude,position.coords.longitude);
// console.log(position);
}
);
}
//List of location from the Db.
var markers = #Html.Raw(Json.Encode(Model.UpcomingLectureGigs));
//Set All merkers on the map
window.onload = function (a) {
var mapOptions = {
center: new window.google.maps.LatLng(window.markers[0].Latitude, window.markers[0].Longitude),
zoom: 12,
mapTypeId: window.google.maps.MapTypeId.ROADMAP
};
var infoWindow = new window.google.maps.InfoWindow();
var map = new window.google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (var i = 0; i < window.markers.length; i++) {
var data = window.markers[i];
var myLatlng = new window.google.maps.LatLng(data.Latitude, data.Longitude);
// console.log(data.Latitude, data.Longitude);
var marker = new window.google.maps.Marker({
position: myLatlng,
draggable: true,
animation: google.maps.Animation.DROP,
get map() { return map; }
});
(function (marker, data) {
window.google.maps.event.addListener(marker,
"click",
function (e) {
infoWindow.setContent(data
.Venue +
" " +
data.Genre.Name +
" " +
data.DateTime.toString("dd/mm/yy"));
//.toISOString().split("T")[0]);
// .format('MM/DD h:mm');
infoWindow.open(map, marker);
});
})(marker, data);
};
};

You can use a geometry library to calculate distance in meters between the user location and marker.
https://developers.google.com/maps/documentation/javascript/reference#spherical
The code snapshot to filter markers may be something like
var markers_filtered = markers.filter(function(marker, index, array) {
var myLatlng = new window.google.maps.LatLng(marker.Latitude, marker.Longitude);
return google.maps.geometry.spherical.computeDistanceBetween(userLatLng, myLatlng) < 10000;
});
for (var i = 0; i < markers_filtered.length; i++) {
//Your stuff here
}
You should add libraries=geometry parameter when you load Maps JavaScript API.
https://developers.google.com/maps/documentation/javascript/geometry

Google Map after load make ajax request

is there any way to know if google map is loaded ? i need to make an ajax request after map is loaded
Currently i am displaying a set of users in a map with a info window. but the problem is due to too much data the browser gets stuck.
var infowindow;
var markersLongLat = {$markersLongLat};
var geocoder = new google.maps.Geocoder();
var markerImg = '{$markerImg}';
function initialize() {
if(hasFilter == 1){
var zoom = 2;
var myLatlng = new google.maps.LatLng(0, 0);
if('' != markersLongLat){
var myLatlng = new google.maps.LatLng(markersLongLat[0].lat, markersLongLat[0].long);
var zoom = 5;
}
var myOptions = {
zoom: zoom,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
else{
var myLatlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
}
map = new google.maps.Map(document.getElementById('googleMap'), myOptions);
console.log('map loaded successfully');
// Adding longLat markers
if ('' != markersLongLat) {
console.log('markersLongLat');
for (var x = 0; x < markersLongLat.length; x++) { var person = new Object();
person.id = markersLongLat[x].id
person.name = markersLongLat[x].name
person.lat = markersLongLat[x].lat
person.long = markersLongLat[x].long
person.address = markersLongLat[x].address
codeLongLat(person);
}
}
function codeLongLat(markersLongLat) {
var lat = markersLongLat.lat;
var long = markersLongLat.long;
var name = markersLongLat.name;
var info = markersLongLat.info;
var markerObj = new MarkerWithLabel({
map: map,
position: new google.maps.LatLng(lat, long),
title: name,
labelContent: name,
labelClass: 'marker-labels',
icon:markerImg
});
google.maps.event.addListener(markerObj, 'click', function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: info});
infowindow.open(map, markerObj);
});
}
google.maps.event.addDomListener(window, 'load', initialize);

I think you are looking for this..
google.maps.event.addListenerOnce(map, 'idle', function(){
//loadedFully
});
For more see this.

Google maps v3 array marker

Hy i am unable to display multiple markers in Google Maps V3, i am getting the coordinates correctly but not displays on map. Also no errors in console
map_items[0] = title
map_items[1] = 55.153766, 11.909180
map_items[2] = link
map_items[3] = text
all of them appear correctly if i do an alert.
example
"Title","51.00150763193481, -2.5659284999999272", "link", "text"
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(55.153766, 11.909180),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var x = 0; x < temp.length; x++) {
if(temp[x][1]){
var map_items = temp[x];
var myLatlng = new google.maps.LatLng(map_items[1]);
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: map_items[0]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div class="google_marker">'+map_items[0]+'<br /><p>'+map_items[3]+'</p></div>');
infowindow.open(map, marker);
});
}
}
}

google.maps.LatLng() takes two parameters, not one, so:
var latlon = map_items[1].split(',');
var myLatlng = new google.maps.LatLng(parseFloat(latlon[0]), parseFloat(latlon[1]));
though in fact, it would be better to use objects rather than an array in which each item contains different data types, for example:
marker_data[0] = {
"lat": 55.153766,
"lon": 11.909180,
"title": "My Title",
"link": "http://stackoverflow.com"
}
//etc...
and then you'd access it like this:
var myLatlng = new google.maps.LatLng(marker_data[0].lat, marker_data[0].lon);

Assuming map_items[1] is string
if (temp[x][1]) {
var map_items = temp[x];
var latlng = map_items[1].split(",");
var myLatlng = new google.maps.LatLng(parseFloat(latlng[0]), parseFloat(latlng[1]));
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: map_items[0]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div class="google_marker">' + map_items[0] + '<br /><p>' + map_items[3] + '</p></div>');
infowindow.open(map, marker);
});
}

I think only last map_items would be available when you click on any marker. Creating a different context may solve your problem.
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(55.153766, 11.909180),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
function AttachEventToMarker(marker, map_items){
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div class="google_marker">'+map_items[0]+'<br /><p>'+map_items[3]+'</p></div>');
infowindow.open(map, marker);
});
}
for (var x = 0; x < temp.length; x++) {
if(temp[x][1]){
var map_items = temp[x];
var myLatlng = new google.maps.LatLng(map_items[1]);
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: map_items[0]
});
AttachEventToMarker(marker, map_items);
}
}
}