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>
Related
I have a page and im trying to add google map to it but it doesn't appear in the page, it has no errors in the console log but it doesn't appear in my page, here is my code:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD19cqU2rIzBHOPL_t8GhJJ9cmi-HNpULg"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 15,
scrollwheel: false,
center: new google.maps.LatLng((31.993072, 35.862211))
};
var map = new google.maps.Map(document.getElementById('googleMap'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
animation:google.maps.Animation.BOUNCE,
icon: 'img/map-marker.png',
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Do with following
add callback in src <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD19cqU2rIzBHOPL_t8GhJJ9cmi-HNpULg&callback=initialize"></script>
center:new google.maps.LatLng(31.993072, 35.862211) instead of center: new google.maps.LatLng((31.993072, 35.862211)) remove extra round bracket
function initialize() {
var mapOptions = {
zoom: 15,
scrollwheel: false,
center: new google.maps.LatLng(31.993072, 35.862211)
};
var map = new google.maps.Map(document.getElementById('googleMap'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
animation: google.maps.Animation.BOUNCE,
//icon: 'img/map-marker.png',
map: map
});
}
#googleMap {
height: 400px;
width: 100%;
}
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD19cqU2rIzBHOPL_t8GhJJ9cmi-HNpULg&callback=initialize"></script>
<div id="googleMap">
</div>
Please note that the particular key for google map only works for the specific domain, so if you are running on localhost, it won't display a map normally.
Use iframe to show map in your website:
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
&q=Space+Needle,Seattle+WA" allowfullscreen>
Google Maps Embed API Link
I have an issue with the Google Maps widget where the marker is not showing on my live site but is showing when I put the code into Codepen.
Codepen:
http://codepen.io/anon/pen/LxLprp
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2X6alsV0XdrvNoB4HCEBxNn9VgQYniII"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(51.632566, -0.175259),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: {lat: 51.632566, lng: -0.175259},
map: map,
title: 'Test'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map" style="height: 300px; width: 300px"></div>
Live Site:
Would anybody possibly know what could be the issue here? The console does not show any errors.
Thank you.
#pix-fe .global-html .html-content * {
max-width: 100%;
}
Remove this CSS rule from your page and it will work...
If you are trying to hide certain features from the map, don't do it with CSS. Do it with the map options.
google.maps.event.addDomListener(window, 'load', initialize);
I've put a google map on a static page in my rails app. Upon initial load the map is fine but I don't know the right javascript to make it load on subsequent page loadings.
The code responsible:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(52.619885, -0.523137);
var mapOptions = {
zoom: 10,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Welcome!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Try
google.maps.event.trigger(map, 'resize');
This should refresh the map
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.