On my website: http://www.ilovefooddreams.com/eligibility
I have a google map shown and all of the sudden it now says.
"Oops! Something went wrong.This page didn't load Google Maps
correctly. See the JavaScript console for technical details."
I looked everywhere I could find and they said to get an API key. I have one hooked up but it still doesn't work.
Here is the code
<html>
<head>
</head>
<body>
<div id="googleMap" style="width:1030px;height:380px;"></div>
</body>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDV9O4nd02xCwyy-AeAmFJ_dR3SKh5GKAE&libraries=places&callback=initialize"
async defer>
</script>
<script>
var amsterdam=new google.maps.LatLng(34.0789742,-118.361875);
function initialize()
{
var mapProp = {
center:amsterdam,
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myCity = new google.maps.Circle({
center:amsterdam,
radius:3000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
myCity.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</html>
How do I fix this?
Thanks!
The version that is currently on your website is reporting Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error in the javascript console.` because there is no key on that page where the API is being included (it is not the same as what you posted in your question):
<script
src="https://maps.googleapis.com/maps/api/js">
</script>
You have a callback in the script referencing a function called initMap. You need to update it to initialize
<div id="googleMap" style="width:1030px;height:380px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDV9O4nd02xCwyy-AeAmFJ_dR3SKh5GKAE&callback=initialize" async defer></script>
<script>
function initialize()
{
var amsterdam=new google.maps.LatLng(34.0789742,-118.361875);
var mapProp = {
center:amsterdam,
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myCity = new google.maps.Circle({
center:amsterdam,
radius:3000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
myCity.setMap(map);
}
</script>
JSFiddle
Make sure to remove the listener as the callback handles this.
Related
I have the following code to display my home. But in my Webpage, it shows only my city generally. It does not show my location specifically although I used correct altitude and longitude from the URL shown;
I want like this;
I want image
But now it shows like this;
now image
Here is my code;
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initialize(){
var mapProp = {
center:new google.maps.LatLng(6.2422975,80.0603382),//latitude and longitude respectively
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize)
</script>
</head>
<body>
<div id="googleMap" style="width:680px;height:400px;"> </div>
</body>
You're defining the map, but you're not defining the marker for the map.
https://developers.google.com/maps/documentation/javascript/markers
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/
i have tried this code
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(41.63, -1),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
and it worked perfectly displaying the google maps image, but i have integrated this work to a bigger project made with Marionette and Jade, it shows :
Uncaught TypeError: Cannot read property 'maps' of undefined
and doesn't charge whole the files of google Maps( like : http://maps.googleapis.com/maps-api-v3/api/js/23/5/map.js.)
in my views.js i have wrote:
mod.mapTemplate = Marionette.ItemView.extend({
template:_.template($('#actors-map-template').html()),
initialize: function () {
var mapProp = {
center: new google.maps.LatLng(41.63, -1),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(
'googleMap'), mapProp);
},
onRender: function () {
//this.initializemap();
google.maps.event.addDomListener(window, 'load', this.initialize);
}
});
and in my jade page :
#googleMap(style='width:500px;height:380px;')
the script is added in other file with all the scripts that are initialized of the whole app, i can't change the architecture, it is not mine.
if someone get the same problem, here is how it worked for me :
i have added two scripts in the header :
script(src='/lib/google-maps/lib/Google.js')
script(src='http://maps.googleapis.com/maps/api/js')
and replace the variable map with this line :
var map = new google.maps.Map(this.$el[0], mapProp);
because it should read the element.
but still a problem for render
there are the code i written, mostly i just copy it from the google api example, dont know where i get wrong,i am sure the error is from the "google.maps.event.addListener" function, but no idea how to fix it, can any one help me that?
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var infowindow = new google.maps.InfoWindow(
{
content:"abc"
});
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:x,
zoom:4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip=[stavanger,amsterdam,london,stavanger];
var flightPath=new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
flightPath.setMap(map);
}
google.maps.event.addListener(flightPath,'click', function() {
infowindow.setPosition(stavanger);
infowindow.open(map,flightPath);
});
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Display an infowindow by getting the coordinate of the first point in the path of the polygon and using it for the infowindow
google.maps.event.addListener(flightPath,'click', function() {
infowindow.setPosition(this.getPath().getAt(0));
infowindow.open(map);
});
google.maps.event.addListener(flightPath,'click', function() {
var aar=this.getPaths();
infowindow.setPosition(arr.getAt(2));
infowindow.open(map,flightPath);
});
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.