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.
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
};
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>
I have the following used for Google Maps using its Javascript API:
# HTML markup
<div id="#city_123">
<div class="map"></div>
</div>
# calling function
marker("#city_123 .map"); // There is only one .map
# marker() function
function marker(shop) {
var map;
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$(shop).each(function(index) {
map = new google.maps.Map(this, mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng($(this).data("lat"), $(this).data("lng")),
map: map,
});
map.setCenter(marker.getPosition());
});
}
I have tried numerous ways to remove the .each because it is not necessary. I only have one .map. There are reasons why I must use .map class because it's actually created dynamically, but that besides the point.
How can I rewrite this to be friendly?
Thanks.
Try this:
JS
function marker(shop) {
var map;
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($(shop)[0], mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng($(shop).data("lat"), $(shop).data("lng")),
map: map,
});
map.setCenter(marker.getPosition());
}
I am working with the Google Maps KML layer click event.
I am using this code:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.875696, -87.624207),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var ctaLayer = new google.maps.KmlLayer('https://sites.google.com/site/anoopkml123/kml/ab9Plan0520.kmz');
ctaLayer.setMap(map);
google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
alert(kmlEvent.featureData.name);
});
}
Sometimes alert(kmlEvent.featureData.name) shows a number but sometimes it's 'undefined'.
Sometimes obj.featuredData.id is null (ZERO_RESULTS status is in status field).
Re-created your code in a fiddle: http://jsfiddle.net/mdares/TAfys/
I cannot replicate the issue you are having. Can you provide an example given the above link of where it fails? Is this possibly browser specific? Finally - is there any additional code you haven't posted which might be the cause? My code is unchanged from yours as you posted, but I am curious if you are also doing other things:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.875696, -87.624207),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var ctaLayer = new google.maps.KmlLayer('https://sites.google.com/site/anoopkml123/kml/ab9Plan0520.kmz');
ctaLayer.setMap(map);
google.maps.event.addListener(ctaLayer, 'click', function (kmlEvent) {
alert(kmlEvent.featureData.name);
});
}