I had wrote a jquery script with GoogleMap API and worked when I putted it in blank HTML page, like:
<!DOCTYPE html>
<html>
<head>
<script>
//my script here...
</scripn>
</head>
<body>
<section id="about" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div id="map-canvas"></div>
</div>
</div>
</section>
//it works fine.
</body>
</html>
and now I'm trying to pack the jquery script into a js file, and include it into bootstrap, but the work failed.
I had looked for some solution here but all did not work for me.
1. Custom jQuery Functions
2. Bootstrap Custom jQuery
3. Run js script anyway at initialization
4. Bootstrap modal opening on page load
I was using this Bootstrap template. please help me for this, thanks.
JS file were included in <footer> tag
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>
<!-- Custom Theme JavaScript -->
<script src="js/grayscale.js"></script>
<!-- drink Map JavaScript -->
<script src="js/drinkmap.js"></script>
jquery script were wrapped like this
$(function() {
var x = [];
var list = [];
var map;
for(var s = 0; s < jsfile.length; s++) {
$.getJSON(jsfile[s], function(json) {
for(var i = 0; i < json.length; i++) {
x.push({
//push some info like name, latlng
});
}
});
}
//start navigator
function getUserGeolocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(parsePosition, noGeolocation);
} else { handleNoGeolocation(false); }
}
//success callback of getCurrentPosition and do map work
function parsePosition(pos) { ... }
//error callback of geolocation.getCurrentPosition
function noGeolocation() { handleNoGeolocation(true); }
function handleNoGeolocation(errorFlag) { ... }
});
either I got error like this in firefox debug
SyntaxError: illegal character
}
or I could not show the map in the <div>.
