The below code actually works and shows the map with correct location and marker (the div with id="map", scripts with javascript function and API) when I put the code into another html document without any other content.
The problem now is that for some reason, when I am using the exact same codes for Google Maps with working API in this HTML, the map does not show up at all.
Here is my code:
<html lang="en" dir="ltr">
<head>
<title>-</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
/* Set the size of the div element that contains the map */
#map {
width: 100%; /* The width is the width of the web page */
max-width:450px;
}
</style>
<link rel="stylesheet" type="text/css" href="../main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
...
<div class="row">
...
<div class="col-sm-6">
<div id="map"></div>
</div>
</div>
<script>
// Initialize and add the map
function initMap() {
// The location of company
var freshlocation = {lat: 1.337344, lng: 103.912835};
// The map, centered at company
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 7, center: freshlocation});
// The marker, positioned at company
var marker = new google.maps.Marker({position: freshlocation, map: map});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap">
</script>
...
</div>
</body>
</html>
I am wondering if it has something to do with some of the codes in head, such as importing fonts or bootstrap, or the position of the maps div, like putting the map into container or row class. Any help would be greatly appreciated.
