Develop Reference

Google MAP API Uncaught TypeError [duplicate]

i have multiple google map instances on my website,now there are two different google map on a same page, what happens is the first one works and other doesn't now i know the logical issue let me show you my code first
<script>
function initMap() {
var myLatLng = {lat: 43.6222102, lng:-79.6694881};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=my_key&callback=initMap"
async defer></script>
now as i defined a callback method it always initializes the method named initMap whereas what i want to do is there can be multiple google maps lets suppose initMap2 how can i load them without callback method?

To load the map without a callback, load the API synchronously/inline (without the async defer), then call your initMap function on the load event.
(Note: FYI: Google changed all their examples to using asynchronous loading to improve the load times)
(Note2: Google has added a "sample" to their documentation describing synchronous loading)
proof of concept fiddle
code snippet:
function initMap() {
var myLatLng = {
lat: 43.6222102,
lng: -79.6694881
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<!-- added 1/21/2023 to prevent:
Loading the Google Maps JavaScript API without a callback is not supported: https://developers.google.com/maps/documentation/javascript/url-params#required_parameters
-->
<script>
function dummy() {}
window.dummy=dummy;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=dummy"></script>
<div id="map"></div>

Google Maps API on Squarespace

I'm using Squarespace to build my website and want to insert a custom map from google maps javascript api. I've already gotten google api key.
I've followed steps as below :
What I'm trying to archive is just to show a google map on my web.
Step 1: Insert a embed block for html
<div id="map_canvas"></div>
Step 2: insert javascript in page header
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Step 3 : in custom css section
#map_canvas
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px
}
But the codes I put on Squarespace didn't work. How should I do?
Here the link to my webpage on SquareSpace
Your Site Title
Thanks!!

LoL, u put the script at a very wrong place i think.
1st. put your script, all of it after </body>
2nd. you need a cover for your maps <div> like a wrapper or so to put it in center. and using a cover/wrapper div you can manipulate the size and the shape.
3rd. i don't know id="maps_canvas". because from google i got this <div id='gmap_canvas' style='height:100%;width:100%; position:static'>, it was gmap_canvas. and put style in it to make them fit with your cover/wrapper div.
easier way: http://embedgooglemaps.com/en/
perhaps it'll help. :)

This is what I changed in my code as below :
Step 1: Insert a code block for html <-- it was not embed block, but code block. I mistyped before.
<div id="mapWrapper">
<div id='gmap_canvas' style='height:100%;width:100%; position:static'>
</div>
</div>
Step 2: insert javascript in page header.
I change only ID name from 'map_canvas' to 'gmap_canvas'
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Step 3 : in custom css section.
Changed ID name from 'map_canvas' to 'mapWrapper', then set another size.
#mapWrapper
{
width: 750px;
height: 500px;
margin: 0px;
padding: 0px
}
I tried to put most of everything people advised me, but still the map doesn't come up on my site.
Is there something wrong yet?

I did the same thing with my site.
What I did differently is not put my #map-canvas within a wrapper. While previewing your site, are you able to find your gmap_canvas with the inspect view? It may be that the content is there, just not displaying properly.
My code:
The following is in the page header code injection box. Note that a large bit of this code (and I don't remember which parts since I don't know JS) is just to keep the pin centered on different screen sizes.
<style type="text/css">
html, body, #map-canvas {
height: 400px;
width 960px;
margin: 0;
padding: 0;}
#banner-area-wrapper {
display: none;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=my_key&callback=initMap">
</script>
<script type="text/javascript">
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map-canvas");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '800px';
}
}
function initialize() {
var myLatLng = {lat: 39.910073, lng: -82.965509};
var mapOptions = {
center: myLatLng,
zoom: 14,
panControl: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
position: google.maps.ControlPosition.LEFT_CENTER},
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Opportunity Center'
});
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
On the page, I have a code block, with the following in it:
<div id="map-canvas" style="width:90%;margin:auto;"></div>
Note that I did not put my #map-canvas inside a wrapper, nor include anything in the custom CSS.
I made a quick dummy site, and replicated your failure to show the map, but I don't know quite enough about Squarespace to say exactly why. I'd start with copying my code and see if that works for you - seems like the big difference is your wrapper around the canvas.

Uncaught ReferenceError: google is not defined at google.maps.Marker()

<script src="https://maps.googleapis.com/maps/api/js?key=[KEY]&callback=initMap"
async defer></script>
<script>
var user_lat,user_lng;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat:17, lng: 80},
zoom: 5
});
}
var marker = new google.maps.Marker({
position: {lat:17,lng:80},
map: map,
title: 'Hello World!'
});
</script>
This is for testing purpose. I have to use this concept in another code. kindly help this.
This may be found as duplicate. There are many other posts which report same error, but none of the answers solved my problem.
Map is loading without any problem. initMap() function is executed. But the marker part is not coming.

Since you have async and defer attributes, execution of the api library is deferred. When marker is being defined, the browser still haven't load the library, so google.maps.Marker is not defined.
Move the code where marker is defined inside initMap() function and it should work.
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVD0ngfhOFs5rnww7UFyz9rN6UznOIZ1U&callback=initMap" async defer></script>
<script>
var user_lat,user_lng;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat:17, lng: 80},
zoom: 5
});
var marker = new google.maps.Marker({
position: {lat:17,lng:80},
map: map,
title: 'Hello World!'
});
}
</script>
var user_lat, user_lng;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 17,
lng: 80
},
zoom: 5
});
var marker = new google.maps.Marker({
position: {
lat: 17,
lng: 80
},
map: map,
title: 'Hello World!'
});
}
html,
body,
#map {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<div id="map"></div>

You load your script with async flag. It means that a browser will not wait until this script will finish loading.
At the time of executing your new google.maps.Map(, it is still not loaded, and execution fails. Remove async defer flags from your script tag and make it load synchronously.
If you want the script to be loaded asynchronously, you need to use callback function.

Google Maps not showing on webpage but shows on localhost

So I'm trying to implement Google maps on a website, and on my localhost it works fine, and I see it perfectly.
However when I upload this to my hosting company, the map doesn't show at all.
When I inspect the element and check the console, I don't see any errors.
Code is below:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(53.092975, -7.895479);
var mapOptions = {
center: myLatlng,
zoom:16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'LCCEurotex'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I have no idea what could be causing it as my code looks the same as the one from the google documentation.
Any ideas on what could be causing it would be great.
Thanks for any help!

Move this portion of code to the footer page, Probably you has binding the map and div container is not property loaded, additionally, tray adding a heigth to the id map_canvas as default in your css.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDo7nFkoUthlGms4De0miS4EPfupB5x0cY"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(53.092975, -7.895479);
var mapOptions = {
center: myLatlng,
zoom:16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'LCCEurotex'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
In your CSS
div#map-canvas {
height: 500px !important;
}

Only add http:// to url of google maps api, change this line:
<script type="text/javascript" src="maps.google.com/maps/api/js?sensor=false"></script>
By this:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Why is my google map blank?

I have not seen this before usually a map either loads or it doesnt because of some error. I am getting the map to load without errors but it is blank:
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&ver=3.0'></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(43.9869349, -102.24306);
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
<div id="map_canvas" style="width:100%; height:300px"></div>
Anyone else seen this or know what might be the culprit? The map itself is sitting in a div that I am show/hide with jQuery. Could that be the conflict?
ANSWER
This was just a stupid conflict with the parent div where I had img {display:none} defined. Oops. .thanks everyone for trying to help.

try adding this:
window.onload = function(evt) {
// this is a simple replica of jQuery's ready function
if(document.readyState === 'complete') {
var latlng = new google.maps.LatLng(43.9869349, -102.24306);
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
}

Try this
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&ver=3.0'></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(43.9869349, -102.24306);
var myOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
<div id="map_canvas" style="width:100%; height:300px"></div>
<script>initialize();</script>

I tried google's example, which looks quite similar to what you're doing, and it worked fine.
http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html
I suspected that you had the lat/lng reversed, but that doesn't appear to be the case. Perhaps work through this example again - as I just ran it locally with no trouble.