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>
Related
I have a google map with a new key
but it gets error in console
error:
Uncaught TypeError: window.Map is not a constructor
at Zr (map.js:2)
at ds.release (map.js:53)
at gs (map.js:5)
at _.rl.Ab (map.js:59)
at map.js:46
HTML
<head>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=mykey">
</script>
</head>
<body onload="init()">
<div id="map_canvas"></div>
</body>
<script src="js/index.js"></script>
index.js
Map = null;
function init() {
var mapOptions = {***};
Map = new google.maps.Map( document.getElementById( "map_canvas" ), mapOptions );
}
Thanks for your time!
Map is reserved word in EcmaScript, so you shouldn't use it as a variable name: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
The problem is this line (jsfiddle thinks Map is read only):
Map = null;
Rename your map variable to something else (like map, with a lower case "m").
proof of concept fiddle
code snippet:
map = null;
function init() {
var mapOptions = {
center: {
lat: 0,
lng: 0
},
zoom: 1
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
google.maps.event.addDomListener(window, "load", init);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
This is a problem with the weekly version of maps this week. I changed:
...//maps.googleapis.com/maps/api/js?key....
to
...//maps.googleapis.com/maps/api/js?v=3.34&key...
the first path server the weekly version of maps which is default.
I chose it to set the version to 3.34 which worked fine. I could have chosen a quarterly version which would update automatically to the version of the current quarter(it would automatically update next quarter) by inserting v=quarterly. Either way the 3.34 fixed my issues.
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.
I have a Google Sites page with a Google map showing locations of speed traps in Israel.
It is showing the locations from a Google Fusion Tables table, displaying locations on the map by dividing values of the 'type' column into buckets.
See the map gadget XML below.
Lately, I added several new rows with a new type (7). I see that the points for these new locations are not shown in the map gadget on my Google Sites page. However, in the fusion table page, I can see these locations just fine.
Any idea why this can happen?
Thanks,
Yaron
The map gadget XML:
(removed unused function for clarity)
<Module>
<ModulePrefs
description="Israel Speed Traps"
width="500"
height="600">
</ModulePrefs>
<Content type="html"><![CDATA[
<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas { width: 100%; height: 100%; }
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=iw"></script>
<script type="text/javascript">
var map;
var layer;
var tableid = 2943387;
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(32.407792,35.502319),
zoom: 8,
mapTypeId: google.maps.MapTypeId.HYBRID
});
layer = new google.maps.FusionTablesLayer(tableid);
layer.setQuery("SELECT 'Location' FROM " + tableid);
layer.setMap(map);
}
</script>
</head>
<body onload="initialize();">
<div id="map_canvas"></div>
</body>
</html>
]]></Content>
</Module>
Your code uses a wrong tableId.
The ID of the table you are talking about is 1uMTPGcFuJsNxKcCLkSxAOIMJCrlzNIV46MUTlD4,
but your code points to a different table with the ID 1OZ8ty7BP3di6WVEwtM-CTJhoQaNlIpZowsSHkHPR which doesn't contain the rows with type:7
Furthermore, when you want to apply the same appereance in the gadget you also must define templateId(for infowindows) and styleId(for feature-styles)
fixed script:
<script type="text/javascript">
var map,
layer,
tableid = '1uMTPGcFuJsNxKcCLkSxAOIMJCrlzNIV46MUTlD4';
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(32.407792,35.502319),
zoom: 8,
mapTypeId: google.maps.MapTypeId.HYBRID
});
layer = new google.maps.FusionTablesLayer(tableid,{
options: {
styleId: 3,
templateId:3
}});
layer.setQuery("SELECT 'Location' FROM " + tableid);
layer.setMap(map);
}
</script>
I followed the instructions from https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
When I run it at Netbeans 8.0.2, only the gray div showed up, no map was shown.
This is my code:
<html>
<head>
<title>Practicing Google Maps</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="https://maps.googleapis.com/maps/api/js">
function initialize() {
// The Map object constructor takes two arguments:
/*
* A reference to the div that the map will be loaded into. We use
* the JavaScript getElementById function to obtain this:
*/
var mapCanvas = document.getElementById('map-canvas');
/*
* Options for the map, such as the center, zoom level, and the map type.
* There are many more options that can be set, but these three are required:
*/
var mapOptions = {
center: new.google.maps.LatLng(44.5403. -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(mapCanvas);
}
/*
* Add an event listener to the window object that will call the initialize function
* once the page has loaded. Calling initialize before the page has finished loading
* will cause problems, since the div it's looking for may not have been created
* yet; this function waits until the HTML elements on the page have been created
* before calling initialize.
*/
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas">
</div>
</body>
</html>
What did I miss? I even comment Google's instructions so I will not miss a thing but still, Google Map didn't show up.
Thank you.
You appear to be missing the closing </script> after loading the Google maps library. And then an opening <script> tag for your code. You also have a few typos, corrected below:
center: new google.maps.LatLng(44.5403, -78.5463),
You've also left out mapOptions when initializing the map:
var map = new google.maps.Map(mapCanvas, mapOptions);
And finally, your div should have some dimensions.
Working code below:
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div style="height:200px; width:200px" id="map-canvas">
Try adding a dimension to your map-canvas div. This usually works.
<div id="map-canvas" style="width:100%; height:100%;"></div>
I am simply trying to display a google map within a jquery mobile page. If I load the page directly it works. However, if I navigate to the page from another page it only renders a single map tile. At first glance it would appear that my issue was similar to https://forum.jquery.com/topic/google-maps-inside-jquery-mobile
However, I was already performing my initialization within the 'pageinit' event and my map div has a set width and height.
I have seen http://code.google.com/p/jquery-ui-map/ but I would rather not use a (another) third party plugin if at all possible.
Here's what my page looks like:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="cordova-1.6.1.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="global.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div id="mapPage" data-role="page">
<style type="text/css">
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas
{
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=***API_KEY_REMOVED***&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var height = $(window).height() - 50;
var width = $(window).width();
$("#map_canvas").height(height);
$("#map_canvas").width(width);
var myLatlng = new google.maps.LatLng(39.962799, -82.999802);
var myOptions = {
center: myLatlng,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
//alert($(map.getDiv()).width());
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: ""
});
google.maps.event.trigger(map, 'resize')
}
$("#mapPage").live('pageinit', function () {
initialize();
});
</script>
<div data-role="header" id="menuHeader">
<a href="MenuDialog.htm" class="menuLink" data-role="none" data-rel="dialog">
<img class="headerIcon" style="height: 40px; border-right: 1px solid #333333; padding-right: 5px;"
id="MenuIcon" src="images/menuIcon.png" /></a>
<p>
Loc
</p>
</div>
<div data-role="content">
<div id="map_canvas" style="margin-top: 50px;">
</div>
</div>
</body>
<html>
Thanks in advance for you help.
Update:
After some experimenting I added the following delay to my resize event:
setTimeout(function() {
google.maps.event.trigger(map,'resize');
}, 500);
This seemed to fix the issue. Hopefully this helps someone else.
I read on a website that if you have this problem it's beacuse the dom isn't totally loaded when you initialize your google map.
You must add this in your code:
$( document ).bind( "pageshow", function( event, data ){
google.maps.event.trigger(map, 'resize');
});
It works for me. It's maybe brutal to resize at every page you show but ... it works.
You have <html> and <body> at 100% size, but not the <div>s in the hierarchy between <body> and <div id="map_canvas">.
Try adding those to your CSS as well (the content one will need an id).
You may also need to ensure that the API knows the size of the map <div> by triggering a resize event when everything is ready. Showing only a single tile is a classic symptom of the API getting it wrong (and generally assuming it has zero size).
Instead of firing a resize, I solved this by wrapping my js in a 'pagecreate' event... like this:
$(document).on('pagecreate', '#map', function() {
var mapOptions = {
center: new google.maps.LatLng(40.773782,-73.974236),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
});
I think the right approach would be to trigger the event when partial tile is loaded once. Below code snippet will help you in achieving that.
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
google.maps.event.trigger(map,'resize');
});
I found the issue for me was that JQuery mobile uses Ajax to load the pages. I am not sure if it is the best practice but I simply forced it to load my map page normally by putting the following code in the anchor tag:
data-ajax="false"