Maplace.js not displaying google map
I followed the installation instructions http://maplacejs.com/#Setup . Upload maplace.js
on my server along with the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>minimal maplace</title>
<script src="//maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7"></script>
<script src="//code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="/js/maplace-0.1.3.js"></script>
<script type="text/javascript">
$(function() {
new Maplace({
locations: [
{
lat: 45.9,
lon: 10.9,
zoom: 8
}
],
controls_on_map: false
}).Load();
});
</script>
</head>
<body>
<div id="gmap"></div>
<div id="controls"></div>
</body>
</html>
Problem: The map is not displayed.
The html code is passed by the W3C validator.
No javascript or network error is displayed in browser developer tools.
source to share
Google map div
<div id="gmap"></div>
size required, for example:
<div id="gmap" style="width: 600px; height: 400px"></div>
Demo not working: http://jsfiddle.net/9u1cuh2w/47/
A working demo containing css additionally: http://jsfiddle.net/9u1cuh2w/46/
source to share
From MapPlace.JS Library , I found this -
And divs must have width and height .
So the code should be like this:
$(function() {
new Maplace({
locations: [
{
lat: 22.8167,
lon: 89.5500,
zoom: 7
}
],
controls_on_map: false
}).Load();
});
#gmap {
width: 400px;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7"></script>
<script src="//maplacejs.com/dist/maplace.min.js"></script>
<div id="gmap"></div>
<div id="controls"></div>
Re -
& key = YOUR_API_KEY (adding the generated API key from here ) is optional. This will be needed if you are using any API keys, required services such as route finder, distance finder, etc.
source to share