I was following the tutorial of Google Map on the google developer and trying to make a google map mark. But after I successfully made that, the pin on the map just shows a white rectangle, instead of a map pin. Here is the link I made
Here are my code:
head.php:
<head>
<title><?php echo $title; ?></title>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style/sponsor_enquiry_style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script type="text/javascript" src="script/script.js"></script>
<script type="text/javascript" src="script/map.js"></script>
</head>
enquiry.php
<!DOCTYPE html>
<html>
<?php
$title = 'Enquiry';
include 'php/head.php';
?>
<body>
<?php
include 'php/nav.php';
include 'php/header.php';
include 'php/preloader.php';
?>
<section class = "main_content">
<div id = "enquiry_content">
<div id = "opening_info">
<h1>// OPENING</h1>
<h1 class = "font_ch">開幕典禮</h1>
<h2>13.6.15</h2>
<p>15:00–17:00</p>
<p>Room CVA 104, Communication and Visual Arts Building, HKBU, 5 Hereford Road, Kowloon Tong, Kowloon</p>
<p class = "font_ch">九龍塘禧福道五號香港浸會大學傳理視藝大樓104室</p>
</div>
<div id = "exhibition_info">
<h1>// EXHIBITION</h1>
<h1 class = "font_ch">展覽期</h1>
<h2>14–21 June</h2>
<p>11:00–21:00</p>
<p>Koo Ming Kown Exhibition Gallery CVA Bldg, HKBU</p>
<p class = "font_ch">浸大傳理及視藝大樓顧明均展覽廳</p>
</div>
<div id = "screening_info">
<h1>// SCREENING</h1>
<h1 class = "font_ch">放映會</h1>
<h2>14 & 21 June</h2>
<p>14:00–18:00</p>
<p>Yue Hwa Chinese Products Lecture Theatre CVA Bldg, HKBU</p>
<p class = "font_ch">浸大傳理及視藝大樓裕華國貨演講廳</p>
</div>
<div id="map-canvas"></div>
</div>
</section>
<?php
include 'php/footer.php';
?>
</body>
</html>
sponsor_enquiry_style.css:
.main_content {
padding: 80px 15px;
width: 600px;
max-width: 95%;
margin: 0 auto;
}
.main_content h1 {
display: inline-block;
}
.main_content #enquiry_content #opening_info, .main_content #enquiry_content #exhibition_info, .main_content #enquiry_content #screening_info, .main_content #sponsors_content #organizer_info, .main_content #sponsors_content #media_info{
margin: 30px 0;
}
.main_content #sponsors_content .sponsor_icons img {
transform: scale(0.85, 0.85);
-o-transform: scale(0.85, 0.85);
-ms-transform: scale(0.85, 0.85);
-webkit-transform: scale(0.85, 0.85);
}
#map-canvas {
max-width: 100%;
height: 300px;
}
map.js
function initialize() {
var myLatlng = new google.maps.LatLng(22.334134,114.182465);
var mapOptions = {
zoom: 15,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I'm not sure what it's good for, but in home.css you've defined a style for
<canvas>which affects the map(which uses canvas). Use a more specific selector which exludes#map-canvas