using EJS to render google maps api on webpage - javascript

I am using EJS to render google maps api on a webpage.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer>
</script>
</body>
</html>
I am getting 200's in my network tab but nothing is rendering on the page, am i doing something wrong with the syntax?

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
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>

you must fix style = "height:xx";
at your html, body and #map
they are set to 0 by default

Related

Why won't google maps show on my website, I have been using the developers website?

/* This is the javascript function that makes the map load */
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {
lat: 44.540,
lng: -78.546
},
zoom: 8
});
}
/* This is the basic css */
#map {
width: 500px;
height: 400px;
}
<!-- Javascript called into the html page -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js" async defer></script>
</body>
</html>
your function is not calling use $(document).ready(function()()) for call your function
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
$(document).ready(function() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 44.540, lng: -78.546},
zoom: 8
});
});
</script>
<style>
#map {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
you need to add a DOM listener that will execute the initMap() function on window load.
try this
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(44.540, -78.546),
zoom: 8
});
}
google.maps.event.addDomListener(window, 'load', initMap);
#map {
width: 500px;
height: 400px;
}
<script src="https://maps.googleapis.com/maps/api/js" ></script>
<div id="map"></div>

Simple google map not working with external css and javascript files

I have set up the most basic google map view in an html page, following the guide here, but I cannot get the map to show. I know this must be very simple, I've tried a lot of fixes, but it doesn't seem to work with linked css and js.
Please note that it works when I use the code in one page, without linking, but doesn't when I use external CSS and JS.
Here's my html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" src="css/mapstyle.css">
</head>
<body>
<div id="map"></div>
<script src="js/map.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUA3LnXH-B5z9GlGh_Gyrebh-xpQoYQMY&callback=initMap">
</script>
</body>
</html>
JS:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
CSS:
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
Here's fiddle: JSFiddle
You need to call initMap() function when loading page like (if using JQuery):
var map;
$(document).ready(function(){
initMap();
});
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
document.add
}
Fiddle
Add script of google map before your map.js. Because it need to load Google Map script in your js
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script‌​>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUA3LnXH-B5z9GlGh_Gyrebh-‌​xpQoYQMY> </script>
<script src="js/map.js"></script>
<link rel="stylesheet" type="text/css" src="css/mapstyle.css">
</head>
<body>
<div id="map"></div>
</body>
</html>
With your fiddle I get an error in the javascript console: Uncaught TypeError: window.initMap is not a function. This is because the initMap function is wrapped in and local to the window.onload function, so it is not globally available as the callback routine for the API.
To fix it, set the "Frameworks & Extensions" in the fiddle to "No Library (pure JS)" and "No wrap - in <head>
Note that you have a typo in your posted code:
<link rel="stylesheet" type="text/css" src="css/mapstyle.css">
should be:
<link rel="stylesheet" type="text/css" href="css/mapstyle.css">
working fiddle
code snippet:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Load Google Maps in HTML page when button is clicked

I have an HTML page with a list of buttons representing locations. When any button is clicked, I want a Google Map to appear with that location. Should the map open on a new HTML page? (because the map should take up the full page), or is it possible to display the map on the same page?
EDIT - OK, I want to open it in another HTML file. I have an external JS file which has the following Map code:
function initialize(lat, lng) {
var mapOptions = {
center: {lat: parseFloat(lat), lng: parseFloat(lng)},
zoom: 8,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize(-34.397, 150.644));
My external HTML file is given below:
<html>
<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js" ></script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
But its not working. The external JS file cannot locate "map-canvas", it seems. Can anyone tell me how to fix this? (script.js is the external JS file)
I worked around your question try this :
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
</head>
<body>
<div>
Show Map1
</div>
<div>
Show Map2
</div>
<div>
<a href="#" class="btn cta map-trigger" data-lat="41.8911684" data-lng="12.707724100000019" targe> Show Map3 </a>
</div>
<script>
var render_map = function( lat, lng, title ) {
var mapCanvas = document.getElementById('map-canvas');
// options
var args = {
zoom : 16,
center : new google.maps.LatLng(lat, lng),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map
var map = new google.maps.Map( mapCanvas, args);
// create marker
var marker = new google.maps.Marker({
position: args.center,
map: map,
title: title
});
toggleMap();
}
var toggleMap = function(){
if ($('body').hasClass('-show-map')) {
mapHide();
} else {
mapShow();
};
}
$('.map-trigger').on('click', function(event) {
event.preventDefault();
var lat = $(this).data('lat');
var lng = $(this).data('lng');
render_map(lat, lng);
});
</script>
<div id="map-canvas"></div>
</body>
</html>

Google API not loading on my page

I'm trying to set up the google map api on my website so for part of a delivery service I'm offering. I copied the code directly from the sample on developers.google.com but for some reason my map wont load on my page!Ive gone through the code multiple times and cant get it to load...HELP!
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPiGhEEN1WjNHOtVoOMufbwsj_thBse2w&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.mapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
The html:
<body onload="initialize()">
<div class="map-canvas" style= "height: 100%">
</div>
</body>
I get a javascript error: Uncaught TypeError: Cannot read property 'ROADMAP' of undefined
This:
mapTypeId: google.maps.mapTypeId.ROADMAP,
Should be:
mapTypeId: google.maps.MapTypeId.ROADMAP,
The major problem is: Uncaught TypeError: Cannot read property 'offsetWidth' of null because your page doesn't have a div with id="map-canvas":
<div class="map-canvas" style= "height: 100%">
Should be:
<div id="map-canvas" style= "height: 100%;">
You are also calling initialize twice, change:
<body onload="initialize()">
To:
<body>
Complete page (works locally):
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body >
<div id="map-canvas" style= "height: 100%;">
</div>
</body>
</html>
I see three issues
you use getElementById, but you give your div a class of map-canvas
it's *M*apTypeId (capital M)
you need to give your map-canvas div a fixed height
Also, since you are using addDomListener, it's unnecessary to also have an onload event on the body tag too. I would just use addDomListener.
<!DOCTYPE html>
<head>
<title>Google Maps</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPiGhEEN1WjNHOtVoOMufbwsj_thBse2w&sensor=true">
</script>
<style>
#map-canvas{
height: 400px;
}
</style>
</head>
<body>
<div id="map-canvas">
</div>
</body>
<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</html>

Javascript googleMaps api not working when in seperate file

I have copied a piece of code from w3schools regarding google maps api.
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
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>
</body>
</html>
When i place it in my html file it works.
However, if i try to place this piece of code inside a javascript file
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
It does not work
Inside my html would be
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script src = "~/Scripts/JScript.js"> </Script>
I also have tried taking this function out
google.maps.event.addDomListener(window, 'load', initialize);
to become
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script src = "~/Scripts/JScript.js"> google.maps.event.addDomListener(window, 'load', initialize);</Script>
But it just doesnt seem to work
Here is the working code,
HTML
map.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="map.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
JS
map.js
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}
$(document).ready(function(){
initialize();
});
The order of including script tag is important. js files are loaded in the order they are included
If you check your console, you can see each js file is loaded one by one.
important piece missing from your code. check your HtML body
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>

Categories

Resources