Develop Reference

Why am I getting this error message? "Uncaught Initmap is not a function" [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm using a google map api on codepen. The error is saying:
Ob {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Ob (my api key is written here)}
I'm not sure if I have the wrong CDN, or if codepen is just not optimized to use google maps apis. The map shows up sometimes, and when I refresh the page it disappears. Then it appears again randomly. When it appears it appears great. It just doesn't always appear. I've got a div id="map></div> and have made its height 100% as the google maps API suggests.
I'm convinced with the console errors that this must be a problem with the way I've written the JS.
Any help would be greatly appreciated.
Here's a link to the pen
And here's my Javascript:
function initMap() {
var frogner = {
info: '<strong>Lucky Cup Frogner</strong><br>\
Bygdøy allé 17<br> 0267 Oslo<br>\
Get Directions',
lat: 59.916010,
long: 10.713385
};
var majorstuen = {
info: '<strong>Lucky Cup Majorstuen</strong><br>\
Neuberggata 20<br> 0367 Oslo<br>\
Get Directions',
lat: 59.927557,
long: 10.716551
};
var vika = {
info: '<strong>Lucky Cup Vika</strong><br>\
Haakon VIIs gate 5<br> 0161 Oslo<br>\
Get Directions',
lat: 59.913833,
long: 10.731125
};
var locations = [
[frogner.info, frogner.lat, frogner.long, 0],
[majorstuen.info, majorstuen.lat, majorstuen.long, 1],
[vika.info, vika.lat, vika.long, 2],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(59.921453, 10.718126),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow({});
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
};
})(marker, i));
}
}

Your function initMap is used as a callback. Sometimes, it appears that Google maps API calls it back before your script is run and the function properly defined.
You won't have the problem outside of CodePen if you set up the loading sequence wisely.
To synchronize easily in CodePen, here is what I'd do:
Dynamically load the Google Maps script once the function is loaded.
To do that, remove the <script> tag at the end of your HTML and add at the end of your JS the following:
const googleMapsScript = document.createElement('script');
googleMapsScript.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBorrLWWOEKylh4WCCBuNc4QF9QjX_n0Bw&callback=initMap';
document.head.appendChild(googleMapsScript);
It should work 100% of the time this way.

How to add text above a marker on Google Maps in JS?

I found exactly the same question for Java, but I'd like to do that in JS. So, how to add text above a marker on Google Maps in JS?

As stated in my comment, You can use multiple letters for the map marker label.
If you use the label property when instantiating a new google.maps.Marker class, you pass it an object, with one of the properties text.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0, 0),
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
label: { color: '#00aaff', fontWeight: 'bold', fontSize: '14px', text: 'Your text here' }
});
Check the fiddle here.

I think what you're looking for isn't included in the standard library. Google do provide this interesting utility library though so you can make your own markers, labels. The one you want is the MarkerWithLable class. From the link:
This class behaves like google.maps.Marker, but it supports the
association of a label with the marker. If the marker is draggable,
so too will be the label. In addition, a marker with a label responds
to all mouse events in the same manner as a regular marker. It also
fires mouse events and "property changed" events just as a regular
marker would.
Looks like it's used in much the same way a the standard Marker class and there appears to be ample examples of it's use kicking around so good luck and I hope that this was helpful :)

I've attached a quick implementation of the infowindow. Be sure to replace my API_KEY with yours as I've only allowed access to the stack snippets url.
This code snippet creates an infowindow. In the example, the infowindow is called instantly after being created to display it's content above the marker.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var infowindow = new google.maps.InfoWindow({
content: 'Welcome to stackoverflow!'
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
infowindow.open(map, marker);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&callback=initMap">
</script>
</body>
</html>
To only show the infowindow when the marker is clicked, wrap it inside of a listener:
marker.addListener('click', function() {
infowindow.open(map, marker);
});

Making my google-map fitBounds [duplicate]

This question already has answers here:
Google maps API V3 method fitBounds()
(4 answers)
Closed 6 years ago.
I basically want to create maps which zoom in to the size corresponding to the SE-NW corners. I have tried so many variations but have not been able to get it to work. I managed to place two markers on one version of my script but was not able to make the map zoom in to the size of the markers. I don't need markers, I was just thinking outside the box. I will include my sort of working script below but would appreciate any help with making the fitBounds to work. I have worked solidly on this for two days, but I am not a programmer so much of the solutions I have found on this website and others don't quite make sense, or they don't address my exact problem.
<!DOCTYPE html>
<!-- This script works, but the size of the output should be as per the SW-NE coordinates -- not the 'div style width/height', and ignoring the center:coordinates -->
<!-- This is one of several maps I am planning to create but I don't mind typing in the fitBounds coordinates by hand -->
<html>
<head>
<title>Google Road Maps</title>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(56.3,4.3),
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP,
disableDefaultUI:true,
scaleControl: true
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
var fitBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(53.3,-0.7),
new google.maps.LatLng(59.3,9.3)
);
</script>
</head>
<body>
<div id="googleMap" style="width:600mm;height:600mm;"></div>
</body>
</html>

You need to call Map.fitBounds with your fitBounds object.
map.fitBounds(fitBounds);
proof of concept fiddle
code snippet:
function initialize() {
var mapProp = {
center: new google.maps.LatLng(56.3, 4.3),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
scaleControl: true
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
map.fitBounds(fitBounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
var fitBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(53.3, -0.7),
new google.maps.LatLng(59.3, 9.3)
);
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>

Google Maps API v3.22 reverting to old controls

Google yesterday released v3.22 of their maps api which moves a bunch of the standard controls.
According to the Google Blog at http://googlegeodevelopers.blogspot.co.uk/2015/09/new-controls-style-for-google-maps.html#gpluscomments you can temporarily revert to the old controls, but I can;t get this to work at all.
The blog post says to simply add google.maps.controlsStyle = 'azteca' before you initialize the map, but I'm still getting the old controls displayed and they clash with some of my custom controls.
I've tried adding the line right at the start of my initialize() routine (which sets up all of the map options and creates the map object; and also right before the map = new google.maps.Map() statement.
Has anyone got any pointers as to what I'm doing wrong?

They have a typo in the post (and in the documentation)
Issue in the issue tracker
google.maps.controlsStyle = 'azteca';
should be:
google.maps.controlStyle = 'azteca';
code snippet:
var map;
function initMap() {
google.maps.controlStyle = 'azteca'
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

try this:
google.maps.controlStyle = 'azteca';

Google Maps Failing to render

Note: I thought it would be better to make a new question on this.
So I recently asked a question about why Google maps is not rendering properly. Now the answer would seem straight forward and simple, accept my code looks like this:
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.trigger(map, "resize");
}
google.maps.event.addDomListener(window, 'load', initialize);
The issue is the map is still broken:
This map is stored in a <div id="Map"></div> which has a height of 350. This Div that holds the map is part of Jquery-UI Tabs, so it also has jquery skinning attached to it which may affect things like size and so on.
With that said the map should just work.
If I open the console and throw in: google.maps.event.trigger(map, "resize"); the maps then works as expected.

I also had a Google Map (v3) embedded within a jQuery UI Tabs, and had to work around the issue with this fix:
var initialized = false;
$('.tabs').find('.ui-tabs-nav li').each(function() {
if($(this).find('a').text() === 'Location') {
if($(this).hasClass('ui-state-active')) {
initialize();
initialized = true;
} else {
$(this).click(function() {
if(!initialized) {
initialize();
initialized = true;
}
});
}
}
});
Note that initialize() should run your starting map code. There are lots of ways to slice-and-dice the initialization, but the point is that we don't do it until the tab we're looking for ("Location", in this case) is active.