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
Related
I'm trying to create a simple google maps, but this simple setup does not seem to work, anyone can tell me what i'm doing wrong? Thanks!
HTML
<script defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBy2rXc1YewdnqhPaaEd7H0I4DTV_pc7fo&">
</script>
<div id="map"> </div>
JS
function initMap() {
console.log('test');
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
Document Ready Function
$(document).ready(function(){
initMap();
});
You should add width and height to your div.
<div id="map" style="width:400px;height:400px;"></div>
your callback parameter not given in <script>.
div without width & height.
if you doesn't to use callback parameter,the <script> not need defer
function initMap() {
console.log('test');
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
<script defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBy2rXc1YewdnqhPaaEd7H0I4DTV_pc7fo&callback=initMap">
</script>
<div id="map" style="width:300px;height:300px;"> </div>
try adding &callback=initMap after you api in script call
$(document).ready(function(){
initMap();
});
function initMap() {
console.log('test');
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
#map
{
width:500px;height:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBy2rXc1YewdnqhPaaEd7H0I4DTV_pc7fo&">
</script>
<div id="map" ></div>
Well the code work.
You need to specify the height and width of your div.
Either by using inline css
style="width:400px;height:400px;"
Or by using CSS
#map {
width: 400px;
height: 400px;
}
Test : https://jsfiddle.net/LmckLLjj/
Please set height and width to you map div
Coz, by default div height and width is 0
PLease change your div like this
<div id="map" style="width:100px;height:100px;"></div>
Or u can set css like this :
<style>
#map{
height:100px;
width:100px;
}
</style>
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.
I get a "TypeError: a is null" and a blank map in Google maps API when clicking back:
14:27:57.271 TypeError: a is null
_.Uf()js:82
Dg()js:90
initMap()map.php:36
Zg/<()js:96
lc/e<()js:49
_.ac()js:46
lc()js:49
<anonymous>js:130
google.maps.Load()js:21
<anonymous>js:130
<anonymous>js:26
1js:82:453
In the header section I use:
<script src="https://maps.googleapis.com/maps/api/js?v=3.25&
key=xxxxxxxxxxxxxxxxxxxxxxxxxxxx_yyyyyyyyyy&callback=initMap" async=""
defer=""></script>
<script>
var map;
function initMap() {
var center = {
lat: 51.46606900136,
lng: -2.5865578706776
};
map = new google.maps.Map(document.getElementById("map"), {
center: center,
zoom: 14,
mapTypeId:google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: center,
icon: "icon.png",
map: map
});
}
</script>
The body section has the map element:
<div id="map"></div>
The map displays OK the first time. The problem only seems to occur when clicking back, so I'm guessing that I need to somehow force the Javascript to execute again if the page is reloaded in this way.
My guess is that when you navigate back to your map, the <div id=map></div> hasn't rendered before the initMap function is called. To fix that put the code in the body after the <div id="map"></map>:
code snippet:
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<script>
var map;
function initMap() {
var center = {
lat: 51.46606900136,
lng: -2.5865578706776
};
map = new google.maps.Map(document.getElementById("map"), {
center: center,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: center,
// icon: "icon.png",
map: map
});
}
</script>
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>
This is my entire code(just a test page). It shows the map but not the marker. How can I make it show the marker?
<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
The problem with your code is that you haven't defined any variable latLng and you are using it in marker. So obviously your code will not work. First define the latLng and then use.
Define it something like this:
var latLng = new google.maps.LatLng(44.5403, -78.5463);//Your marker coordinates.
and then use it in your code like:
var marker = new google.maps.Marker({
position: latLng,
map: map
});
Demo : http://jsfiddle.net/lotusgodkk/x8dSP/3520/