Im having a hard time solving a problem i have using Google Maps JS APIv3.
I always get:
TypeError: google.maps is undefined
This is always the case, and i can't figure it out. It's driving me crazy.
I have some JS files in my head:
<!-- Javascript files -->
<script type="text/javascript" src="/resources/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=****"></script>
<script type="text/javascript" src="/resources/js/lightSlider/js/jquery.lightSlider.js"></script>
<script type="text/javascript" src="/resources/js/light-gallery/js/lightGallery.min.js"></script>
<script type="text/javascript" src="/resources/js/cycle.js" defer></script>
And my code for getting the map is:
$.each(google.results, function(x, y) {
var lat = y.geometry.location.lat;
var lng = y.geometry.location.lng;
var map;
function initialize(lat,lng) {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(lat,lng)
};
map = new google.maps.Map(document.getElementById('gmaps'),mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize(lat,lng));
});
I should mention that the last block of code ($.each) is in a AJAX call when the ajax is done.
Edit: I have tried some of the solutions that i have seen here.
Thanks in advance.
Are you sure you're using your correct key when loading the api ?
src="https://maps.googleapis.com/maps/api/js?key=****"
There's few more basic things you need to verify,maybe it's because you're missing one of them :
1- Declare the application as HTML5 using the "< ! DOCTYPE html>" declaration.
2- Create a div element named "gmaps" to hold the Map(well,i assume you did this already).
3- also if you're using an external file for your js code,make sure to load it in your html file.
Related
In my google maps webapp, I continue to get this error:
infobox.js:126 Uncaught ReferenceError: google is not defined
It is first triggered by this, inside infobox.js:
InfoBox.prototype = new google.maps.OverlayView();
I have read several stack articles on this exact topic, including:
Async Google Maps API v3 undefined is not a function
Google Maps API: markerwithlabel.js - Uncaught ReferenceError: google is not defined
Google Maps API throws "Uncaught ReferenceError: google is not defined" only when using AJAX
Here is my <head> section:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script type="text/javascript" src="paypal/lightbox.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyD1vT***********1s6tNOgL2F44P8&callback=initialize&libraries=places"></script>
<script type="text/javascript" src="js/TreasureHunt.js"></script>
<script type="text/javascript" src="js/infobox.js"></script>
<script type="text/javascript" src="js/markerwithlabel.js"></script>
Inside TreasureHunt.js is my initialize() function:
function initialize() {
// set up basic/default world map, zoomed out, showing globe
var mapOptions = {
...
}
}
I have tried moving the js references to different locations but nothing works. I am forced by google to use the &callback=initialize approach, else my map doesn't load at all. I used to be able to use google.maps.event.addDomListener(window, 'load', initialize); instead of the async, but that no longer works, the map simply doesn't load. I have tried putting TreasureHunt.js both before and after the maps API js file but nothing works. Always inside infobox and markerwithlabel it thinks the google object doesn't exist.
What am I doing wrong?
(Note: 1 year ago this all worked perfectly until one day when my local maps js script stopped working and google now requires referencing the js from their server - so I fixed it, and then these other problems occurred.)
change the script include from:
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyD1vT***********1s6tNOgL2F44P8&callback=initialize&libraries=places"></script>
to (remove async defer and &callback=initialize):
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyD1vT***********1s6tNOgL2F44P8&libraries=places"></script>
Add (code to call the initialize function after the DOM has rendered):
google.maps.event.addDomListener(window,'load',initialize);
I am trying to use Google App script's html service and Maps API V3 to create a map.
I can get the google base map working, but I would like to load a geojson in Google Drive as a data layer on the map and am running into issues. I am working in an unbound script editor.
here is my Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('ui')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
}
function getData(){
return DriveApp.getFileById("/*file-id*/")
}
and here is my ui.html
<!DOCTYPE html>
<html>
<head>
<title>Data Layer: Simple</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key/*my key*/&callback=initMap">
</script>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 29.454235, lng: -98.506203}
});
var x = google.script.run.getData() //call app script function to get geojson file here
map.data.loadGeoJson(x); //load geojson as data layer
}
</script>
</body>
</html>
The results of this script is a blank google map where I would expect there to be some polygons loaded on the map like Google's data layer example https://developers.google.com/maps/documentation/javascript/examples/layer-data-simple
Should I be using app script scriplets instead of google.script.run? I was having trouble getting that to work either.
Any help or insight would be much appreciated!
the line of code
var x = google.script.run.getData()
is an async call so the data is loaded after the map is rendered and it's never showed. A solution to your problem should be using template (but I don't think it's the nicest solution. A nice solution is to handle the async call) nevertheless here is what you need to change:
In your GS file instead of invoking a html file invoke a html template:
function doGet() {
return HtmlService.createTemplateFromFile(filename)('ui').evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
}
in your UI file replace the line var x = google.script.run.getData() by:
var x = "<?!= DriveApp.getFileById("/*file-id*/").getBlob().getDataAsString() ?>"
DriveApp.getFileById will only catch the file but it's not readable as it. You then need to say that you want to get the content of the file using getBlob().getDataAsString().
the marker <?!= and ?> are here to say that in this template file we need to evaluate the code inside before rendering it.
I'm trying to develop a web mobile app that allows people to navigate between different POI's however I've come across an error when trying to implement the Google Maps Api.
Here's the code for those interested:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mobile_Map_Application</title>
<style type="text/css">
html, body{ height: 100%; width: 100%; margin: 0; padding: 0; }
#map{height:100%;}
</style>
<script>
var map;
function initialise(){
map = new google.maps.Map( document.getElementById( 'map' ), {
zoom: 17,
center: { lat: 51.887082, lng: -2.088722 }
} );
initialise();
</script>
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialise" async defer>
</script>
</head>
I'm getting the following error :
SCRIPT5009: 'google' is undefined
How can I fix this?
The problem
Your initialise() function doesn't know the google object yet, because the google object is only known AFTER the Google API script is loaded.
The solution
The easiest way to fix this, is to do this :
Put the code of your initialise() function AFTER the Google API script's script tag
Remove the async defer from the Google API script's script tag
Additionally :
You're also missing an } at the end of your initialise() function.
You'll need an HTML element with an id map for your code to work.
Working code
Check out this Fiddle for how to fix your code!
You're calling initialise(); once in your code, but this could execute before the Google Maps JS has loaded.
You also specify initialise as the callback function, in
<script
type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialise" async defer>
This will execute the initialise function once the Maps JS has loaded. That's all you need; delete the initialise(); line you have in your own JS.
PS: John's answer points out a couple of things you need to do.
You need a closing } at the end of the function,
And you need <div id="map"></div> in your page.
PPS: you don't need to specify the sensor=false argument any more when loading the Maps API.
I am facing this strange issue.
The bing map does not display on my page where as all the controls even pushpins displays properly.
I googled a lot and same the functionality is working great in my other project(s)
I suspect that something is wrong with the reference to the dev.virtualearth.net, Or I am missing something
Here is my code:
ASCX (is inside the content place holder of dynamically generated aspx):
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=de-de">
</script>
<div>
.
.
.
<div id="bigMapContainer">
<div id="eventMap">
</div>
</div>
</div>
Code behind:
string script = #"
function GetVEMap() {
map = new VEMap('eventMap');
map.SetDashboardSize(VEDashboardSize.Small);
map.LoadMap();
DisplayEventsOnMap();
}
function DisplayEventsOnMap() {
var eventMapLayer = new VEShapeLayer();
eventMapLayer.Id = 'eventMapLayer';
var points = null;
.
.
.
//Code to get the data for pin display etc
.
.
map.AddShapeLayer(eventMapLayer);
map.SetMapView(eventMapLayer.GetBoundingRectangle());
map.SetZoomLevel(15);
});
}
$(window).load(function() {
GetVEMap();
}
);";
ScriptManager.RegisterStartupScript(this, typeof(Page), "MapDisplay", script, true);
CSS:
#bigMapContainer {display: block;}
#eventMap { position: absolute; width: 550px height: 500px; }
I have added some references on the master pages which are not related to the map but might conflict with my map implementation(?)
<script type="text/javascript" src="/js/modernizr-2.0.6.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<script type="text/javascript" src="/js/superfish.js"></script>
<script type="text/javascript" src="/js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.totop.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.responsivemenu.js"></script>
<script type="text/javascript" src="/js/client.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
Help is very much appreciated.
First off, it looks like you are pointing to Virtual Earth 6.2 which was deprecated several years ago and now points to v6.3. That said v6.3 is really old and is not recommended for new development projects. If this is a new project you should be using Bing Maps V7 which is the latest and greatest version of Bing Maps (Virtual earth was renamed to Bing Maps in 2009). V7 is much faster, has a lot more features, and also a lot smaller.
Assuming that this is an existing project that just started having issues. Looking at your code, one thing I notice right away is that there are no credentials specified when loading the map. This is required. Right before you call the LoadMap method you should have a line of code like this:
map.SetCredentials('YOUR_BING_MAPS_KEY');
If you do not have a Bing Maps key you can get one by creating a Bing Maps account in the Bing Maps portal: http://bingmapsportal.com Here is some documentation on creating a key: http://msdn.microsoft.com/en-us/library/ff428642.aspx
Next, the eventMap div, do you specify any styles for this? It should have a position, width and height specified in as either a CSS class or as an inline style. Without this you will get odd rendering in some browsers.
After a huge reserach I found that the issue was with the css. Thanks #rbrunditt for help
mapcontrol.css inside http://ecn.dev.virtualearth.net/mapcontrol/v6.3/css/bin/6.3.20091207154938.04/de/mapcontrol.css have a class for the map container- .MSVE_Map which have the attribute position:absolute which was making the tiles display out of the screen.
I have overridden the class to position:relative which actually solved the issue..
I've been banging my head on the wall after going through the documentation on this several times! I can't seem to get past the API error to get the map to appear on my site.
I am getting the following error message from the web page where I want the map to be displayed:
Google has disabled use of the Maps API for this application. The provided key is not a valid Google API Key, or it is not authorized for the Google Maps Javascript API v3 on this site. If you are the owner of this application, you can learn about obtaining a valid key here: https://developers.google.com/maps/documentation/javascript/tutorial#Obtaining_Key
I have (several times now) gone into my account and:
enabled the Maps v3 API service
generated a new API key
added my allowed referrers to the key. (both www.domain.com and domain.com URLs)
I have the following script added to the head of the web page:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&key=MY_API_KEY_HERE" type="text/JavaScript" language="JavaScript"></script>
And I have the following JavaScript function that executes when a link is clicked on the page:
alert("viewMap()");
var map = new GMap3(document.getElementById("map_canvas"));
var geocoder = new GClientGeocoder();
var address = "1600 Amphitheatre Parkway, Mountain View";
alert("Calling getLatLng ...");
geocoder.getLatLng(address, function(point) {
var latitude = point.y;
var longitude = point.x;
// do something with the lat lng
alert("Lat:"+latitude+" - Lng:"+longitude);
});
The initial viewMap() alert is displayed and then is followed by the 'Google has disabled use...' error message.
The error console is also showing 'GMap3 is not defined'.
Can anyone please assist with showing me the errors of my ways?
Several issues, the most serious of which is loading the Version 3 API with your <script> tag and then using Version 2 code like GClientGeocoder. And GMap3 does not exist at all in either version.
Converting a Version 2 map to Version 3 is not as simple as loading the Version 3 API. It needs to be rewritten from scratch (and that's outside the scope of SO).
You don't say what referrers you are using, but you need to be explicit in your use of wildcards: www.domain.com/*, domain.com/*
I would suggest changing GMap3 to GMap2, and ensure that you load the Version 2 API (specifying your Console key in the relevant <script> tag). And then set about re-writing for Version 3.
Maybe just change the GMap3 line to:
var myOptions = {zoom: 5,mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
Here's a more complete example of using navigator.geolocation instead of the GClientGeocoder:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<style>
#map_canvas {width:300px;height:300px;display:block;}
</style>
</head>
<body>
<div id="map_canvas"></div>
<button onclick="begin();">Click</button>
</body>
<script>
function begin(){
navigator.geolocation.getCurrentPosition(loadmap,noloc);
}
function noloc(){ alert('Since this is a location based tool, please reload and share your location');}
function loadmap(position){
var myOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
var latitude=position.coords.latitude;
var longitude=position.coords.longitude;
//do something with the lat lng
var usrll=new google.maps.LatLng(latitude,longitude);
map.setCenter(usrll);
var usrmarker = new google.maps.Marker({position: usrll,map: map});
}
</script>
</html>