Map not appearing on page. I am attempting to place a map on the page and then add some markers and eventually a sort of instagram mashup. However, the map is not displaying and I cannot figure out why. I have tried numerous things, to no avail. HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGrN5DdMYr-o1FGaF2bLF4Ub2VZqIrguA"></script>
<script type="text/javascript" src='application.js'></script>
</head>
<body>
<div id="map-canvas" style="height:500px; width:500px;">
</div>
</body>
</html>
JavaScript is:
jQuery(document).ready(function(){
var markers = new Array();
function initialize(){
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(38.9047, 77.0164),
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas') , mapOptions);
}
});
The map is not displaying. I am not getting any error.
You are not calling your function. You need to call it by adding initialize(); somewhere after the function. Personally, I would move the function to outside the .ready() and only put the call to it there, like this:
var markers = new Array();
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(38.9047, 77.0164),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
jQuery(document).ready(function() {
initialize(); // call the function on page load
});
See http://jsfiddle.net/DelightedDoD/yvrr704t/1/
Related
I know many people faced this type of error because many question & answer related to this type of error
Below is my dynamic footer
<script src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap" async defer></script>
<script async src="assets/js/custom.js"></script>
custom.js look like
jQuery(document).ready(function($) {
// Google Map
function initMap(){
var location = new google.maps.LatLng(40.712784, -74.005941);
var myOptions = {
zoom: 6,
center: location,
scrollwheel:false
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
var marker = new google.maps.Marker({
position: location,
map: map
});
// alert("Google Working");
};
google.maps.event.addDomListener(window, "load", initMap);
});
Map div only for contact-us.html page
<div id="map"></div>
but the map showing & also showing error like below
InvalidValueError: initMap is not a function
& all pages without contactus.html showing below error on the console
TypeError: a is null
...ndChild(c)};_.ug=function(a){for(var b;b=a.firstChild;)_.tg(b),a.removeChild(b)}
I'm searching last two days & applying for this but not any helpful answer.
I need to destroy error.
What's wrong with my code.
Thanks
Edited Based Answer Which Working Now
function initMap(){
var divId = document.getElementById("map");
if (!divId) {
return;
}
var location = {lat: 40.712784, lng: -74.005941};
var map = new google.maps.Map(divId,{
zoom: 6,
center: location,
scrollwheel:false
});
var marker = new google.maps.Marker({
position: location,
map: map
});
}
Load JS
<script src="assets/js/custom.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap" async defer></script>
Your function initMap() is scoped in anonymous function so googlemaps can't see this function.
You should declare function in global scope without jQuery(document).ready(function($) { ...
function initMap(){
var div = document.getElementById("map");
if (!div) {
return;
}
var location = new google.maps.LatLng(40.712784, -74.005941);
var myOptions = {
zoom: 6,
center: location,
scrollwheel:false
};
var map = new google.maps.Map(div,
myOptions);
var marker = new google.maps.Marker({
position: location,
map: map
});
// alert("Google Working");
};
window.onload = function() {
if (google) {
google.maps.event.addDomListener(window, "load", initMap);
}
}
more about scopes: https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/#what-is-local-scope
Loads libs:
<script src="assets/js/custom.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap" async defer></script>
Custom js file link need to go upper then google API link like below
<script src="assets/js/custom.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap" async defer></script>
Edit custom js file see below code which working
function initMap(){
var location = {lat: 40.712784, lng: -74.005941};
var map = new google.maps.Map(document.getElementById("map"),{
zoom: 6,
center: location,
scrollwheel:false
});
var marker = new google.maps.Marker({
position: location,
map: map
});
}
I hope to help you
Thanks
I am trying to load googlemap inside div. My script is as follows
<script src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyAiy_9XkvL8a5-zsSV5jFpH8sHcth5HkpE&callback=myMap"></script>
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(19.015509, 72.843067),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
And on the loading of page I am getting error. I have attached an image of error.
I do not know exactly where you're wrong.
But by the error you get.
The function is not set correctly.
Or that it is not within the local scope.
But you should view a map of Google.
If an address you want.
There's another way to get this into your code.
Just enter Google Maps and select correspondence and just paste it into the code.
I attach an example that you can understand.
What I mean exactly.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2702.5938589941825!2d8.640130883976095!3d47.36132677916924!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x479aa3ffb7057dbb%3A0x8dfd514b03a2c801!2sBodenacherstrasse+52%2C+8121+F%C3%A4llanden!5e0!3m2!1siw!2sch!4v1505149050010" frameborder="0" style="border:0" allowfullscreen></iframe>
Move you script myMap() before the googleapis call
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(19.015509, 72.843067),
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?
key=AIzaSyAiy_9XkvL8a5-zsSV5jFpH8sHcth5HkpE&callback=myMap"></script>
You have your scripts in the wrong order. You are loading the Google Maps Javascript API v3 without the defer async tags, so when it finishes loading (inline), it will attempt to call the function myMap, which is defined (inline) after the script include. Reverse the order.
proof of concept:
fiddle with original order
error: Uncaught Vb {message: "myMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Vb (https://maps.googleapis.com/m….googleapis.com/maps/api/js?callback=myMap:144:59"}
fiddle with reordered code
(no errors, loads map)
working code snippet:
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<div id="map"></div>
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(19.015509, 72.843067),
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>
Google uses initMap as default function so use initMap() instead of myMap()
Try this:
function initMap() {
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(19.015509, 72.843067),
scrollwheel: false
};
I'm trying to change the center of a map using an each loop for going to different places, however when I execute the code the map does not show all locations instead the map show the first and last location, I will be grateful if you can help me with this problem.
This is the code:
var a = new google.maps.LatLng(8.8013, -74.72538);
var b = new google.maps.LatLng(1.0619, -73.2558);
var c = new google.maps.LatLng(12.5872, -81.7025);
var d = new google.maps.LatLng(3.2719, -73.0877);
var locations = new Array(a, b, c, d);
var mapProp = {
center: new google.maps.LatLng(5.0619, -70.2558),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
function initialize() {
goToLocations(locations);
}
google.maps.event.addDomListener(window, 'load', initialize);
function goToLocations(locations) {
$.each(locations, function (index, location) {
goToLocation(location);
});
}
function goToLocation(location) {
// here I can not see all locations
window.setTimeout(map.setCenter(location), 5000);
}
<html>
<body>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"> </script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<h1>Map that go to different locations </h1>
<div id="googleMap" style="width: 500px; height: 380px"></div>
</body>
</html>
Your function is working fine and it is actually showing all the cities you have on your array. However, we are not able to see it. The function is exectuted so fast that we are only able to see the first and the last one.
Try to put a Timeout inside the $.each function and it will work:
$.each(locations, function (index, location) {
window.setTimeout(function(){
goToLocation(location);
}, 1000);
});
I was trying to simplify the way I add Google maps to my pages.
I'm using this markup for each map:
<div class="map" data-coordinates="-34.397, 150.644">
<div class="canvas" id="map_canvas"></div>
</div>
and this jquery code:
jQuery(function($) {
var maps = $('.map');
maps.each(function() {
var $this = $(this),
mapId = $this.find('.canvas').attr('id'),
coordinates= $this.data('coordinates');
// set map options
var mapOptions = {
center: new google.maps.LatLng(coordinates),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create the map
var map = new google.maps.Map(document.getElementById(mapId), mapOptions);
});
});
this is a recreation of the tutorial on the google maps website.
when I do it like the tutorial it works fine, but when I use my code above I get the map controls with a grey background, I also tried jQuery(window).load(); with the same result, and the issue seems to be from each() because when I create the map without it, it works fine.
this is the code that works:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
There's a problem with coordonates.
google.maps.LatLng() accepts Lat and Lng as separate params, not a composite string.
Try :
jQuery(function($) {
$('.map').each(function() {
var $this = $(this),
canvas = $this.find('.canvas').get(0),
coordinates = $this.data('coordinates').split(/,\s?/);
// set map options
var mapOptions = {
center: new google.maps.LatLng(Number(coordinates[0]), Number(coordinates[1])),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create the map
var map = new google.maps.Map(canvas, mapOptions);
});
});
You might need to test that regexp.
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.