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
Related
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 used the code from a website as shown below to let me show a google map in my page.
You can see it in action here http://www.pcpro.co.uk/blogs/wp-content/uploads/2010/12/google-maps-simple-example.html
My question is how can i change the code to when a user clicks on the map to open a link in a new window?
Thank you
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function () {
// Define the latitude and longitude positions
var latitude = parseFloat("38.1447817");
var longitude = parseFloat("23.848843");
var latlngPos = new google.maps.LatLng(latitude, longitude);
// Set up options for the Google map
var myOptions = {
zoom: 15,
center: latlngPos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Define the map
map = new google.maps.Map(document.getElementById("map"), myOptions);
// Add the marker
var marker = new google.maps.Marker({
position: latlngPos,
map: map,
title: "Auto Marin"
});
});
</script>
<div id="map" style="width:230px;height:140px;"></div>
You could add an event listener.
google.maps.event.addListener(map, "click", function(){
window.open(*LINK*)
});
This is my first time trying to embed google maps into a webpage.
I've followed instructions from the API site, and I've Googled other maps, but what I'm seeing doesn't seem to help.
Here's what I've got.
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
// Enable the visual refresh
google.maps.visualRefresh = true;
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(51.54968,-0.16305),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Your code doesn't create a marker. You should add something like
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.54968,-0.16305),
map: map,
title: "One title"
});
I am sure this is a simple fix, but I've been searching all over and everything I try just does not work. All I'm trying to do is replace the default marker with a custom icon, but it will not show up. Here's my code:
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(43.041936,-88.044523);
var mapOptions = {
center:myLatlng,
zoom:15,
disableDefaultUI:true,
mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("milwaukeeMap"), mapOptions);
var marker = new google.maps.Marker();
marker.setPosition(myLatlng);
marker.setMap(map);
marker.setIcon('/images/map-marker.png');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I know the image is in the correct location; I can find it in my browser if I type the path. I've checked and double-checked, but is there a problem with my code? Sorry, I can't provide a live example.
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(43.041936,-88.044523);
var mapOptions = {
center:myLatlng,
zoom:15,
disableDefaultUI:true,
mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("milwaukeeMap"), mapOptions);
var markerImage = 'images/map-marker.png';
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: markerImage
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Try this, i changed how to create the marker.
I changed the image url to test it, it seams its working:
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(43.041936,-88.044523);
var mapOptions = {
center:myLatlng,
zoom:15,
disableDefaultUI:true,
mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("milwaukeeMap"), mapOptions);
var markerImage = 'http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/bar_coktail.png';
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: markerImage
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="milwaukeeMap" style="height:400px;width:400px;"></div>
</body>
</html>
Code on JSFiddle http://jsfiddle.net/iambnz/NGja4/160/
I created a small test file, and there does not seem to be anything wrong with your javascript code. I see my own marker perfectly. So it seems there is something wrong in the rest of your HTML file. Does the PNG file exists? Is it really a PNG? Maybe try a different image to be sure.
Ron.
I found that in some cases, externally hosted icons need an extra parameter e.g.
images/map-marker.png?raw=true
I was using Firefox 57.0.4 for Ubuntu then I switch over to Chromium Version 63.0.3239.84 and it worked. That is with the
?raw=true
On and off.
I have a somewhat strange problem. I have two maps on my site, a big one and a small one. I want to use the big one to show a route to a certain address. I'm now trying to implement the two maps but get a weird problem. The small map is working fine, but on the big map only a small area of the div is filled with the map, the rest is empty. (See the image.)
I use the following code to display the two maps:
function initialize() {
var latlng = new google.maps.LatLng(51.92475, 4.38206);
var myOptions = {zoom: 10, center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({position: latlng, map:map, title:"Home"});
var image = '/Core/Images/Icons/citysquare.png';
var myLatLng = new google.maps.LatLng(51.92308, 4.47058);
var cityCentre = new google.maps.Marker({position:myLatLng, map:map, icon:image, title:"Centre"});
marker.setMap(map);
var largeLatlng = new google.maps.LatLng(51.92475, 4.38206);
var largeOptions = {zoom: 10, center: largeLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
var largeMap = new google.maps.Map(document.getElementById("largeMap"), largeOptions);
var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"});
largeMarker.setMap(largeMap);
}
[..]
jQuery(document).ready(function () {
[..]
initialize();
});
What's going wrong here?
EDIT:
Unfortunately the suggestions below doesn't seem to work. The closes i came is to remove the display:none from the elements and set the elements to hide with jquery
[..]
jQuery(document).ready(function () {
[..]
$("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).hide();
});
With the following result
Yes, #Argiropoulos-Stavros but, Add it as a listener
google.maps.event.addListenerOnce(map, 'idle', function(){
google.maps.event.trigger(map, 'resize');
map.setCenter(location);
});
It will begin re-sizing after, map rendered.
I think you are using v3.
So google.maps.event.trigger(map, "resize");
Also take a look at here
I fixed it!
I made an own function for the largemap and placed it in the callback when the elements are opened
function largeMap(){
var largeLatlng = new google.maps.LatLng(51.92475, 4.38206);
var largeOptions = {zoom: 10, center: largeLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
var largeMap = new google.maps.Map(document.getElementById("largeMap"), largeOptions);
var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"});
largeMarker.setMap(largeMap);
}
[..]
$("#showRoute").click(function(e){
e.preventDefault();
$("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).fadeIn(500);
$("#shadowContent").show().css({'width':'750px','top':'25px','left':'50%','margin-left':'-400px'});
$("#closeBarLink").click(function(l){
l.preventDefault();
$("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).fadeOut(500);
});
largeMap();
});
Thanks anyway!!
call initialize(); function after you box active.
$(document).ready(function () {
$("#shadow").show(function () {
initialize();
})
});
When you're loading in the large map, try adding this at the end of your map code.
map.checkResize();
When Google Maps first renders on your page, it has the dimensions recorded so that it displays the map images in that size. If you're resizing the map dynamically, you need to tell the API to check the new size.
<script type='text/javascript' >
var geocoder, map;
function codeAddress() {
var address= '<?php echo $this->subject()->address; ?>';
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 13,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon:'http://rvillage.com/application/themes/rvillage/images/map-marker.png'
});
var infowindow = new google.maps.InfoWindow({ content: 'coming soon' });
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, this);
});
}
});
}
jQuery(document).ready(function () {
codeAddress();
});
</script>
You are using pop up window with jQuery, and I guest you call initialize() function when document is ready ( $(document).ready(function() {initialize(); }) ).
Try call initialize() function after pop up windown showed.
Johnny