I can't understand what is the problem? I used this example from Google Map APIs: Simple Map
<body>
<!-- Map Section -->
<section id="map"></section>
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5Y8CqFe-4Egzl5TlPqlFvjRGcuCfHGvY&callback=initMap" async defer></script>
</body>
main.js:
//--------------------------------------------------
// Contact Map
//--------------------------------------------------
function initMap() {
if ($("#map").length > 0)
{
var map;
map = new google.maps.Map(document.getElementById('map'),{
center: {lat: 44.4297538, lng: 26.0649221},
zoom: 16,
scrollwheel: false,
zoomControl: false,
panControl: false,
streetViewControl: false,
mapTypeControl: false,
overviewMapControl: false,
clickable: false
});
}
}
Error:
message: "initMap is not a function"
name: "InvalidValueError"
Having the same issue, I personally removed the &callback=initMap to make it work.
Other threads seams to show that initMap is a function you should build yourself.
I had the same issue working on a wordpress template with Sage (a WordPress starter theme).
My js was wrapped with
(function($) {
// all the functions to create map, center markers, etc.
}
Then, the map was initialize in $(document).ready
I removed (function($) { } and just add the functions without $(document).ready then it was ok.
Also, be sure to load the custom js file before the api google map :
<script src="custom-js-google-map.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Try move in head the loading for script
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5Y8CqFe-4Egzl5TlPqlFvjRGcuCfHGvY&callback=initMap" async defer></script>
and be sure for right path for
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script>
eventually try using relative path
<script src="./js/jquery.min.js"></script>
<script src="./js/main.js"></script>
None of the solutions offered were helping me. I finally came across dynamic loading of the script here: https://developers.google.com/maps/documentation/javascript/overview#Loading_the_Maps_API
Because you are loading it in a separate js file the google map api's are not loading in the correct order with the function.
Doing this solved it for me:
// Create the script tag, set the appropriate attributes
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap';
script.defer = true;
// Attach your callback function to the `window` object
window.initMap = function() {
// JS API is loaded and available
// Throw your code within this, it will wait for the google api scripts to completely load
};
// Append the 'script' element to 'head'
document.head.appendChild(script);
Hope this helps, I spent a day looking for solution.
Related
google.visualization.Map seems to work only with multiple addresses on data. When I only have one address, the map was greyed out, and if I drag the map, it shows up. It works fine when I have multiple addresses on the data.
Here is the sample code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {
"packages":["map"],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
"mapsApiKey": "AIzaSyDJCykPxyz" //I have real key.
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -123.1731, 'Shopping']
]);
/*var mapOptions = {
zoom: 8,
center: {lat:31.4422, lng: -122.1731}
}*/
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(data, {
showTooltip: true,
showInfoWindow: true
});
}
</script>
</head>
<body>
<div id="map_div" style="width: 600px; height: 450px"></div>
</body>
</html>
If I comment out the middle line of data [37.6153, -122.3900, 'Airport'], Map does not show up. Otherwise it works. Is it a bug? is there a workaround for it? My project requirement is to dynamically display a map for an address selected by users.
I tried to change zoom level, but it does not fix the problem.
Help is highly appreciated!
I use the Google Maps API on my webpage. Sometimes the map is working but sometimes not. The error i get when the map is not working is "initMap is not a function"*.
<div id="map">
</div>
<script>
window.initMap = function(){
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(47.037596, 8.303537),
zoom: 13,
});
}
</script>
I load the maps scripts before the closing body tag. The scripts is loaded from the Wordpress functions.php.
<script type="text/javascript" async="" defer="" src="//maps.googleapis.com/maps/api/js?key=XXXXXXXXX&libraries=places&callback=initMap"></script>
The existing posts to this topic couldn't help me. I also tried without defer and async and with just defer. Withous success. I also put the whole init.Map function inside a jQuery document.ready.
The code you posted works as expected (with a valid API key and a height set on the map container).
#map {
height: 180px;
}
<div id="map">
</div>
<script>
window.initMap = function() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(47.037596, 8.303537),
zoom: 13,
});
}
</script>
<script type="text/javascript" async="" defer="" src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap"></script>
About 3 weeks ago the arcgis Dynamic service is no longer visible on the google map. At the beginning I thought that something went wrong with my code, but after executing a sample code that does the same with the same result, I realized that something else went wrong.
The following code was taken from "ArcGIS Server Link for Google Maps API V3: Examples". It is basically loading an ESRI sample dynamic service.
When I load a Dynamic service from my arcgis server, the service is loaded but its not visible on the google map. (I know that because when I click on the map I get the property window of the feature from the Dynamic service although it is not visible).
If you run the following code you will not be able to see the esri dynamic service:
http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer][1]'.
My question is what went wrong here?
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Dynamic Map Service Overlay</title>
<script type="text/javascript">
//copy from http://gmaps-samples.googlecode.com/svn/trunk/versionchecker.html?v=2.86
function getURLParam(name) {
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
return (results === null ? "" : decodeURIComponent(results[1]));
}
var gmaps_v = getURLParam('v');
if (gmaps_v) gmaps_v = '&v='+gmaps_v;
var script = '<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false' + gmaps_v + '"></' + 'script>';
document.write(script);
</script>
<script type="text/javascript" src="../src/arcgislink.js">
</script>
<script type="text/javascript" src="dynamap.js">
</script>
</head>
<body style="margin:0px; padding:0px;">
<div id="map_canvas" style="width:100%; height:100%">
</div>
</body>
//dynamap.js
function init() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(40, -100),//35.23, -80.84),
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true //my favorite feature in V3!
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var url =
'http://sampleserver1.arcgisonline.com/ArcGIS/
rest/services/Demographics/ESRI_C
ensus_USA/MapServer';
var url =
'http://sampleserver1.arcgisonline.com/ArcGIS
/rest/services/Demographics/ESRI_Census_USA/MapServer';
var dynamap = new gmaps.ags.MapOverlay(url);
dynamap.setMap(map);
}
window.onload = init;
I'm working on a site, and I'm looking to have 1 different Google Map on each page for a list of multiple pages. But I'm unsure as to how to go about this. I'm using a bit of code I found (Listed below.), on W3Schools, but the code they have is for one map on a single page, and multiple maps on a single page. I can't repeat the first function of Javascript even though I show it twice below, because it won't show up on other pages. There may be a way to rewrite it to get it to work, but I'm somewhat new to Javascript.
I've looked for this question, but couldn't come to find one relating to this, only how to create multiple maps per one html file.
I'm using this piece of Javascript on my main.js file rather than using the snippet on each separate page. This is a bit of code I found off of W3Schools. The only change I made was I copied and pasted the function and it's containing code twice -
function myMap() {
var mapCanvas = document.getElementById("map1");
var mapOptions = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom: 5
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
function myMap() {
var mapCanvas = document.getElementById("map2");
var mapOptions = {
center: new google.maps.LatLng(42.859822,-97.15901),
zoom: 5
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
And I'm using this piece of HTML on my first HTML page -
<div id="map1" style="width:100%;height:500px"></div>
And this one on my second -
<div id="map2" style="width:100%;height:500px"></div>
As found here on their website -http://www.w3schools.com/graphics/tryit.asp?filename=trymap_basic.
And as mentioned in the title I'm referencing the Google Maps Javascript API.
This is my structure to call the files I'm using, that I place on each HTML sheet.
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link href="https://fonts.googleapis.com/css?family=Cardo|Roboto:100,300,500" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"> </script>
You can only have one function with a given name in a scope. To load the map onto separate pages, if the <div> id is the same, you can use the same file with a single function in it:
main.js:
function myMap() {
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom: 5
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
include it in the <body> of your pages like this:
<div id="map"></div>
<script type="text/javascript" src="scripts/SO_20170108_main.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
proof of concept/live example
page1.html
page2.html
common javascript
Is this documented somewhere that I need to specify a callback in order for the google.maps module to be defined? Or is this a bug.
The following code doesn't load the google maps module:
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps JavaScript API v3 Example: Asynchronous Map Simple
</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://maps.googleapis.com/maps/api/js?v=3.6&key=myKey&sensor=false' //adding 'callback=something' gets the maps module to load
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Edit -- response to answer
To do so, you can inject your own tag in response to a
window.onload event or a function call, but you need to additionally
instruct the Maps JavaScript API bootstrap to delay execution of your
application code until the Maps JavaScript API code is fully loaded.
You may do so using the callback parameter, which takes as an argument
the function to execute upon completing loading the API.
How does that imply that not having a callback will not load any of the api? It says that you can use the callback parameter to execute a function when the code if fully loaded but it doesn't say the code will never load without a callback parameter.
It is documented here: http://code.google.com/apis/maps/documentation/javascript/tutorial.html#asynch