Google map getting "initMap is not a function" in chrome browser only - javascript

Google map getting "initMap is not a function" in chrome browser only.
In other browsers (Firefox, IE, etc ) are working fine.
I am using the Google MAP API for location search and autocomplete location.
The similar question answers I had tried. (https://stackoverflow.com/questions/46319676/initmap-is-not-a-function-in-using-google-maps-api),(https://stackoverflow.com/questions/40448238/initmap-is-not-a-function)
Not working yet in Chrome.
Here is the code.
<script>function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 34.397, lng: 150.644 },
scrollwheel: false,
zoom: 2
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key={{KEY}}&callback=initMap">
</script>
<div>
<div id="map" style="width: 500px; height: 400px;"></div>
</div>

The script should be on the below section. It can't find the "map" div hence creates a problem that leads to "initMap is not a function" problem.
<html>
<head></head>
<body>
<div>
<div id="map" style="width: 500px; height: 400px;"></div>
</div>
<script>
// scripts goes here
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key={{KEY}}&callback=initMap">
</script>
</body>
</html>

use this
<script
src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
$(document).ready(function() {
...
google.maps.event.addDomListener(window, 'load', initMap);
});

Related

Google maps isn`t showing properly

When I try to run this code in a browser, the google maps window appear, but the satelite or map image doesn`t show properly. I can hardly see the map or satelite image.
<DOCTYPE html>
<html lang="no">
<head>
<title>Kontakt</title>
<meta charset="utf-8">
<link rel="stylesheet type=text/css" href="stylesheetfgross.css">
</head>
<body>
<header>
<h1>Kontakt</h1>
</header>
<div id="map" style="width:400px;height:400px">
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(59.234389, 11.137546),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
</body>
I just deleted function myMap() from your code and google script looks like that right now: <script src="https://maps.googleapis.com/maps/api/js"></script>, just deleted callback from url and it works now. Check jsFiddle
I used this, and it worked for me.
<iframe width="600" height="450" frameborder="0" style="border:0"
src="key" allowfullscreen="">
</iframe>

Google Map API invalid Value Error Function not defined?

I'm new to javascript and not too familiar with the google API integration. I'm just trying to load a simple page with a google map for testing. I've seen different implementations and can really discern any differences which might be giving me errors in this little code block. Can anyone tell me why I am getting getting this error?
<HTML>
<HEAD>
<TITLE> MAP </TITLE>
</HEAD>
<SCRIPT src="https://maps.googleapis.com/maps/api/js?
key=**keyhere**&callback=initialize"></script>
<SCRIPT LANGUAGE ="JavaScript">
function initialize(){
var map = new google.maps.Map(document.getElementById('map'), {zoom: 3,
center: {lat:51.500, lng:-0.201}});
}
</SCRIPT>
</BODY onload= "initialize()">
<div id="map" style="width:500px; height:400px;"></div>
<BODY>
<HTML>
You have syntax errors in your HTML, this is incorrect:
</BODY onload= "initialize()">
<div id="map" style="width:500px; height:400px;"></div>
<BODY>
should be:
<BODY onload= "initialize()">
<div id="map" style="width:500px; height:400px;"></div>
</BODY>
You also don't need/want two calls to initialize (one in the body onload, the other in the API callback parameter), remove one.
Working code:
<HTML>
<HEAD>
<TITLE> MAP </TITLE>
</HEAD>
<SCRIPT src="https://maps.googleapis.com/maps/api/js?callback=initialize" async defer ></script>
<SCRIPT LANGUAGE ="JavaScript">
function initialize(){
var map = new google.maps.Map(document.getElementById('map'), {zoom: 3,
center: {lat:51.500, lng:-0.201}});
}
</SCRIPT>
<BODY>
<div id="map" style="width:500px; height:400px;"></div>
</BODY>
<HTML>

Uncaught Error: Google not defined | Google Maps API

I am working on a small project that works heavily with google maps api. I dont have any errors but the page where the map is supposed to be loading is empty. I think it is because the my location object is being passed and the properties are not being inspected once the object is being passed.
If you know about the gogole maps api and you can help, I would really aprreciate it.
/*----------------list of all the global variables---------------------*/
var map;
/*----------------This is the model---------------------*/
var initialLocation = {
center:{
lng: 33.895593,
lat: -117.316224
},
zoom: 15
}
/*----------------This is the viewmodel---------------------*/
function initMap(){
map = new google.maps.Map(document.getElementById("googleMap"), initialLocation);
}
/*----------------This is the view---------------------*/
$("googleMap").append(map);
html,
.container{
height: 100%;
width: 100%;
font-family: helvetica, sans-serif;
margin: 0px;
padding: 0px;
background-color: lightgrey;
}
#googleMap{
height: 100%;
}
<html>
<head>
<title>Omar Jandali Udacity Map</title>
</head>
<body>
<div id="container">
</div>
<script type="text/javascript" src="collections/underscore.js"></script>
<script type="text/javascript" src="collections/backbone.js"></script>
<script type="text/javascript" src="collections/jquery-3.1.0.js"></script>
<script type="text/javascript" async defer
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDik_TF3x4yc96CvWWw12YQ4DMjoG3vfFM&v=3&callback=initMap"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
When $("googleMap").append(map); executes, map is still set to null. You would need to execute it inside the callback function initMap() after map has been assigned the map object, e.g.
function initMap(){
map = new google.maps.Map(document.getElementById("googleMap"), initialLocation);
$("#googleMap").append(map);
}
try this
function initMap(){
var latlng = new google.maps.LatLng(-117.316224, 33.895593);
var mapOptions = {zoom: 7, center:latlng}
map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
}

Google Map is not loading for the first time

I am using Google Maps JavaScript API to load map inside my mobile website. When I navigate from the previous page map won't load but if I refresh the page map load as expected. If I use the JavaScript inside the body even the page is not loading. I can't figure out the problem. Is it something with the previous page code ?
Here is my code in Head tag.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.0.min.css" />
<link href="css/site.css" rel="stylesheet" type="text/css" />
<script src="./js/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=xxxxxxxx&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(<?php echo $longtitude ?>, <?php echo $latitude ?>);
var mapOptions = {
zoom: 10,
center: myLatlng,
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: 'Location'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).delegate('#content', 'pageinit', function () {
navigator.geolocation.getCurrentPosition(initialize);
});
</script>
</head>
Here is my Body Tag
<body >
<div id="wrapper">
<div class="header">
<img src="images/logo-small.png" alt="logo"/>
</div>
<div class="back">
<a data-rel="back"><img src="images/back.png"/></a>
</div>
<div id="content">
<div class="list">
<div class="list-items" id="info">
<?php echo "<h3>$sa1<span>$postcode<span>$sa2</span></span></h3><h2>$price</h2>";?>
<br class="clear" />
<br class="clear" />
</div>
</div>
<br class="clear" />
<div id="map-canvas">
</div>
</div>
</div>
</body>
I refer question This and This but it's not working with my code.
Problems
First of all, why are you using jQuery Mobile? I don't see the point in your current example.
In this case jQuery Mobile is the main problem. Because jQuery Mobile is used everything will be loaded into the DOM. When you "navigate from the previous page" page is not refreshed and this line:
google.maps.event.addDomListener(window, 'load', initialize);
can't trigger. It will trigger only if you manually refresh the page.
Second thing, you cant use jQuery Mobile page events without having any page what so ever. In your code you have this part:
$(document).delegate('#content', 'pageinit', function () {
navigator.geolocation.getCurrentPosition(initialize);
});
For it to initialize successfully div with an id content MUST have another attribute called data-role="page", like this:
<div id="content" data-role="page">
</div>
Third thing. Lets assume everything else is ok. Pageinit will not trigger from the HEAD. When jQuery Mobile loads pages it loads them into the DOM and only BODY part will be loaded. So for your map to work you need to move our javascript to the BODY (including a css). In you first example it didnt worked because you were triggering page even on a non-page div container.
And last thing, if you want to use jQuery Mobile properly you will need to take care correct version of jQuery is used with a correct version of jQuery Mobile. If you want to be safe use jQ 1.8.3 with jQM 1.2
Solution
Here's a working solution:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<style>
#map-canvas {
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(33.89342, -84.30715);
var mapOptions = {
zoom: 10,
center: myLatlng,
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: 'Location'
});
}
//google.maps.event.addDomListener(window, 'load', initialize);
$(document).on('pageshow', '#wrapper', function(e, data){
initialize();
});
</script>
<div id="wrapper" data-role="page">
<div class="header">
<h3>Test</h3>
<img src="images/logo-small.png" alt="logo"/>
</div>
<div id="content">
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>
Working examples and much more information regarding this topic can be found in this ARTICLE.
just add: data-ajax="false" to the link tag which redirects to the page that contains your map. for example, if map.aspx contains your map, you can link to it like this:
<a href="map.aspx" data-ajax="false">
I was having same problem but I have no any jquery-mobile libraray or any other which would conflict the map. Struggling a hard time, I found a solution for my project:
Doesn't work:
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer>
</script>
Works (Removing async and defer attributes):
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
Hope! This helps someone if the other solutions doesn't work. Try this only if none of other solution work because it is not good suggestion as we know google page speed guide or google map api guide says to use it.
I have also same problem with
google.maps.event.addDomListener(window, 'load', initialize); where initialize is my method .
I just add few line of code before google.maps.event.addDomListener(window, 'load', initialize);
Code is
$(document).ready( function () {
initialize();
});
and this code is working for me
You should use the pageloadevent to load everything. This way everything is loaded once jquery Mobile has done all the DOM changes it needs. I've had this same problem and that's what helped.
$(document).on('pageload', function() {
initialize();
});
It's in the docs: http://api.jquerymobile.com/pageload/
EDIT: Sometimes it also helps to load the markers in a separate function than the one loading the map.

Google Maps API v3 Street View "google is not defined"

I am just getting started with the Maps API and I was trying to copy the following example.
https://code.google.com/apis/maps/documentation/javascript/examples/streetview-simple.html
When I copy the source I get the following error in the script.
google is not defined
Line 11
var fenway = new google.maps.LatLng(42.345573,-71.098326);
This is the html file I am using.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Street View Layer</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="//maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
map.setStreetView(panorama);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 400px; height: 300px"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
</body>
</html>
The google example loads perfectly but my code does not.
I have seen a few people getting this error but none of the fixes listed seem to work for me. Have I just made a basic error while copying the script?
There is the protocol missing in the path.
//maps.googleapis.com/maps/api/js?sensor=false
should be
http://maps.googleapis.com/maps/api/js?sensor=false
(it's missing in many of the examples)

Categories