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

Not able to see google map in intel xdk using Google Map API JS

This is my first Google Map API project, and I am creating a transport app but unfortunately it does not work, earlier it was working but now it is only working in browser not on mobile and emulator.
In emulator it only shows Google logo and Terms Link.
I am using this reference google link
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MYKEY&libraries=places"></script>
my JS CODE : (mapwork.js)
function currentpostionmap()
{
 if ( navigator.geolocation ) {
        function success(pos)
{
             var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
 var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
       var image123 = 'https:///developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var bounds = new google.maps.LatLngBounds();
        marker = new google.maps.Marker({
            position: latlng,
            map: map,
icon: image123
        
        });
bounds.extend(latlng);
map.fitBounds(bounds);
//
multimarker(map);
//
        }
        function fail(error) {
           var latlng = new google.maps.LatLng(18.5204, 73.8567);
 var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
         map = new google.maps.Map(document.getElementById("map"), myOptions);
      
        marker = new google.maps.Marker({
            position: latlng,
            map: map
           
         });
        }
        // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
      navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
    }
}
function multimarker(map)
{
jQuery.ajax({
url: baseurl + "getdriverlocation.php",
async: true,
success: function(data){
var myArray = jQuery.parseJSON(data);// instead of JSON.parse(data)
jQuery(myArray).each(function( index, element ) {
driverlat = element.driver_lat;
driverlng = element.driver_lng;
locations.push([driverlat , driverlng])
});
for (i = 0; i < locations.length; i++)
{
var latlng1 = new google.maps.LatLng(locations[i][0], locations[i][1]);
drivermarker=new google.maps.Marker({position:latlng1});
drivermarker.setMap(map);
google.maps.event.addListener(drivermarker, 'click', (function(marker, i) {
return function() {
//DRIVER CLICK EVENT
}
})(drivermarker, i));
}
}
});
}
function watchDriverPosition(userid)
{
function success(pos)
{
window.setInterval(function(){
saveDriverLocation(pos.coords.latitude, pos.coords.longitude,userid);
}, 50000);
}
function fail()
{
alert ('Fail to watch drivers Position');
}
watchId = navigator.geolocation.watchPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
}
function saveDriverLocation(latc,lngc,userid)
{
jQuery.ajax({
url: baseurl + "postdriverlocation.php",
data:'latitude='+latc +'&longitude='+lngc+'&login_id='+userid,
type: "POST",
success:function(response){
response = $.trim(response);
if (response == "false"){
console.log(response);
}else{
console.log(response);
}
},
error:function (){}
});
}
CALLING MAP FUNCTION HERE(main.js)
function showmap(usertype,userid)
{
if (usertype==1)
{
changepage('#main');
currentpostionmap();
}
else if (usertype==0)
{
watchDriverPosition(userid);
}
else{
alert('You are not logged in.');
changepage('#login');
}
}
It is working on Every browser but not on EMULATOR or MOBILE PHONE.
Please let me know why it is happening and provide a better solution
Thanks

Wrap your map code to
$( document ).on( "pageshow", "#YOUR_MAP_PAGE", function() {
//your map code...
});

populating google maps markers using ajax

I'm trying to put about 120 marker on a Google Map using ajax populated array of google.maps.LatLng objects
here's my script
<script type ="text/javascript">
$.ajaxSetup({
cache: false
});
var gMapsLoaded = false;
var latlng = [];
var returnValue;
var marker;
var xmlDoc;
$.ajax({
type: "POST",
url: "map.aspx/getLatLng",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
xmlDoc = $.parseXML(response.d);
$(xmlDoc).find("Table").each(function () {
latlng.push(new google.maps.LatLng($(this).find("lat").text(), $(this).find("lng").text()));
});
//alert(latlng.length.toString());
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
window.gMapsCallback = function () {
gMapsLoaded = true;
$(window).trigger('gMapsLoaded');
}
window.loadGoogleMaps = function () {
if (gMapsLoaded) return window.gMapsCallback();
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src", "http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
$(document).ready(function () {
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(24.678517, 46.702267),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
for (var i = 0; i < latlng.length; i++) {
marker = new google.maps.Marker({
map: map,
position: latlng[i]
});
var infowindow = new google.maps.InfoWindow({
content: 'Location info:<br/>Country Name:<br/>LatLng:'
});
google.maps.event.addListener(marker, 'click', function () {
// Calling the open method of the infoWindow
infowindow.open(map, marker);
});
}
}
$(window).bind('gMapsLoaded', initialize);
window.loadGoogleMaps();
});
</script>
Html
<div id ="map" style="width:850px; bottom:20px; height: 500px;">
</div>
I think i'm missing something here
Should i parse latlng array of google.maps.LatLng objects to LatLng before i assign it to position ?
marker = new google.maps.Marker({
map: map,
position: latlng[i]
});
Your help will be appreciated,
Thanks in advance,

i think the problem is that you aren't taking into account the asynchronous nature of the ajax request.
you need to build the markers after the ajax request has completed.
put your for each loop in a function and call it within 9at the end) of your on success ajax callback.
you will also need to load the ajax after google maps has loaded otherwise you wont be able to create google latlng objects becasue google maps librbary may not be loadded yet.
withjout rewriting everything this may work..
$.ajaxSetup({
cache: false
});
var gMapsLoaded = false;
var latlng = [];
var returnValue;
var marker;
var xmlDoc;
window.gMapsCallback = function () {
gMapsLoaded = true;
$(window).trigger('gMapsLoaded');
}
window.loadGoogleMaps = function () {
if (gMapsLoaded) return window.gMapsCallback();
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src", "http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
$(document).ready(function () {
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(24.678517, 46.702267),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
$.ajax({
type: "POST",
url: "map.aspx/getLatLng",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
xmlDoc = $.parseXML(response.d);
$(xmlDoc).find("Table").each(function () {
latlng.push(new google.maps.LatLng($(this).find("lat").text(), $(this).find("lng").text()));
});
for (var i = 0; i < latlng.length; i++) {
marker = new google.maps.Marker({
map: map,
position: latlng[i]
});
var infowindow = new google.maps.InfoWindow({
content: 'Location info:<br/>Country Name:<br/>LatLng:'
});
google.maps.event.addListener(marker, 'click', function () {
// Calling the open method of the infoWindow
infowindow.open(map, marker);
});
}
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
$(window).bind('gMapsLoaded', initialize);
window.loadGoogleMaps();
});

I moved xml processing after map initialization
$(document).ready(function () {
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(24.678517, 46.702267),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
xmlDoc = $.parseXML(stringxml);
$(xmlDoc).find("Table").each(function () {
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng($(this).find("lat").text(), $(this).find("lng").text())
});
var infowindow = new google.maps.InfoWindow({
content: 'Location info:<br/>Country Name:<br/>LatLng:'
});
google.maps.event.addListener(marker, 'click', function () {
// Calling the open method of the infoWindow
infowindow.open(map, marker);
});
});
}
$(window).bind('gMapsLoaded', initialize);
window.loadGoogleMaps();
});
And every marker in its proper place.
Thanks guys

Google maps onclick infowindow disappear after refresh cycle

This map is to track multiple markers in a single view. The markers have to be updated every 5 seconds from the server.
My infowindow disappears after each refresh. There is a json request every 5 seconds. when i click on the marker, the infowindow appears and is cleared as soon as during next json call. Can i devise a method/any solution to make it appear(dynamic) even after refreshing.
var map1;
function map1_initialize( )
{
setInterval(function() {
var lat=new Array();var lng=new Array();var latlng = [];
$.getJSON('web_services/latlong.php?option=4&user_id=<?php echo $user_id;?>', function(json) {
$.each(json.Result.Data,function(i,gmap){
lat[i]=gmap.latitude;
lng[i]= gmap.longitude;
latlng[i] = new google.maps.LatLng(lat[i], lng[i]);
/*google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(json.Result.Data[i].alias);
console.log(json.Result.Data[i]);
infowindow.open(map, marker);
}
})(marker, i)); */
if ( google.maps.BrowserIsCompatible( ) )
{
map1 = new google.maps.Map2( document.getElementById( 'map' ) );
map1.addControl( new google.maps.LargeMapControl3D( ) );
map1.addControl( new google.maps.MenuMapTypeControl( ) );
map1.setCenter( new google.maps.LatLng( 0, 0 ), 0 );
for ( var i = 0; i < latlng.length; i++ )
{
var marker = new google.maps.Marker( latlng[ i ] );
map1.addOverlay( marker );
}
var latlngbounds = new google.maps.LatLngBounds( );
for ( var i = 0; i < latlng.length; i++ )
{
latlngbounds.extend( latlng[ i ] );
}
map1.setCenter( latlngbounds.getCenter( ), map1.getBoundsZoomLevel( latlngbounds ) );
GEvent.addListener(marker, 'click', function() {
// When clicked, open an Info Window
//alert(gmap.alias);
marker.openInfoWindowHtml(gmap.alias);
});
//gmap.alias is the alias name for the marker-loading it via json response
}
});
});
}, 5000);
}

With lot of R&D, i found out the answer!!!Hope this might help somebody...
var json=[];
function initialize() {
// Create the map
// No need to specify zoom and center as we fit the map further down.
var map = new google.maps.Map(document.getElementById("map_canvas"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
});
/*jQuery.extend({
getValues: function(url) {
var result = null;
$.getJSON('web_services/latlong.php?option=4&user_id=21', function(json) {
result = json;
});
return result;
}
});*/
jQuery.extend({
getValues: function(url) {
//setInterval(function() {
var result = null;
$.ajax({
url: url,
type: 'get',
dataType: 'json',
async: false,
success: function(data) {
result = data.Result.Data;
}
});
return result;
//},5000);
}
});
setInterval(function() {
var markers=$.getValues("web_services/latlong.php? option=4&user_id=21");console.log(markers);
// Define the list of markers.
// This could be generated server-side with a script creating the array.
/*var markers = [
{ lat: -33.85, lng: 151.05, name: "marker 1" },
{ lat: -33.90, lng: 151.10, name: "marker 2" },
{ lat: -33.95, lng: 151.15, name: "marker 3" },
{ lat: -33.85, lng: 151.15, name: "marker 4" }
];*/
// Create the markers ad infowindows.
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
// Create the marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.latitude, data.longitude),
map: map,
title: data.alias
});
// Create the infowindow with two DIV placeholders
// One for a text string, the other for the StreetView panorama.
var content = document.createElement("DIV");
var title = document.createElement("DIV");
title.innerHTML = data.alias;
content.appendChild(title);
var infowindow = new google.maps.InfoWindow({
content: content
});
// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
// Handle the DOM ready event to create the StreetView panorama
// as it can only be created once the DIV inside the infowindow is loaded in the DOM.
/* google.maps.event.addListenerOnce(infowindow, "domready", function() {
var panorama = new google.maps.StreetViewPanorama(streetview, {
navigationControl: false,
enableCloseButton: false,
addressControl: false,
linksControl: false,
visible: true,
position: marker.getPosition()
});
});*/
}
// Zoom and center the map to fit the markers
// This logic could be conbined with the marker creation.
// Just keeping it separate for code clarity.
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
var data = markers[index];
bounds.extend(new google.maps.LatLng(data.latitude, data.longitude));
}
map.fitBounds(bounds);
},5000);//call every of 5 secs.
}

adding a marker to your current position on google maps

Does any of you know how to add a marker on you currentPosition in google maps using sencha?
This is my code:
var map;
var defaultLocation;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var spots;
var infowindow = new google.maps.InfoWindow();
owt.views.RoutePanel = Ext.extend(Ext.Panel, {
title: 'route',
fullscreen:true,
layout: 'card',
items: [
map = new Ext.Map({
useCurrentLocation: true,
mapOptions: {zoom:10},
listeners: {
delay: 500,
afterrender: function() {
var geo = new Ext.util.GeoLocation({
accuracy: 1,
autoUpdate: true,
listeners: {
locationupdate: function (geo) {
center = new google.maps.LatLng(geo.latitude, geo.longitude);
zoom = 10;
if (map.rendered){
map.update(center)
}
else{
map.on('activate', map.onUpdate, map, {single: true, data: center});}
},
locationerror: function (geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
if (bTimeout) {
alert('Timeout occurred.');
}
else {
alert('Error occurred.');
}
}
}
});
geo.updateLocation();
spots = [];
for (var i in owt.stores.spotStore.data.map) {
spots.push(new google.maps.LatLng(owt.stores.spotStore.data.map[i].data.lat,
owt.stores.spotStore.data.map[i].data.lng))
switch (owt.stores.spotStore.data.map[i].data.categorie_id) {
case 1:
var image = 'assets/images/monumenten_icon.png';
break;
case 2:
var image = 'assets/images/horeca_icon.png';
break;
case 3:
var image = 'assets/images/toilet_icon.png';
break;
case 4:
var image = 'assets/images/shopping_icon.png';
break;
}
var markers = [];
var spotMarker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(owt.stores.spotStore.data.map[i].data.lat,owt.stores.spotStore.data.map[i].data.lng),
map: this.map,
icon: image
});
google.maps.event.addListener(spotMarker, 'dblclick', (function(spotMarker, i) {
return function() {
var win1 = new Ext.Panel({
floating:true,
layout: "card",
centered:false,
scroll: 'vertical',
styleHtmlContent: true,
centered: true,
width:280,
height:140,
html:'<img src="assets/images/spots/' + owt.stores.spotStore.data.map[i].data.naam.replace(/\s/g, "") + '.jpg"<div class="floatpanel"></div><h3>' + owt.stores.spotStore.data.map[i].data.naam + '</h3><p>' + owt.stores.spotStore.data.map[i].data.omschrijving + '</p></div>'
}).show()
}
})(spotMarker, i));
}
for (var i in owt.stores.groepStore.data.map) {
var groepMarker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(owt.stores.groepStore.data.map[i].data.latitude,owt.stores.groepStore.data.map[i].data.longitude),
map: this.map,
icon: 'assets/images/groepen_icon.png'
});
(groepMarker, i);
}
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
directionsDisplay.setMap(this.map);
calcRoute();
}
}
}
)]
});
function calcRoute() {
var waypts = [];
for (var i = 1; i < 9; i++) {
waypts.push({
location:new google.maps.LatLng(owt.stores.spotStore.data.map[i].data.lat, owt.stores.spotStore.data.map[i].data.lng),
stopover:true});
}
start = new google.maps.LatLng(50.80520247265613, 3.274827003479004);
end = new google.maps.LatLng(50.8252946155155, 3.2799339294433594);
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
}
});
};
Ext.reg('owt-loginpanel', owt.views.RoutePanel);
I have tried a dozen different things but i just cant get the marker to show.

I tried running your code on Google Chrome. It seems like the locationupdate event gets called only the first time after I grant the browser the permission to access my current location. After refreshing the page, the locationupdate event did not get called anymore since I had already given the browser permission to access my current location.
You could try first setting up your GeoLocation object and use it to save the user's coordinates in a variable. I believe, you don't have to use it inside the Map's afterrender function. You could try outputting your center variable with console.log() to see if you're getting the user's location correctly.
After you have the location, it shouldn't be hard to put a marker on it.