Javascript 谷歌地图标记不工作_Javascript_Php_Html_Google Maps_Google Maps Markers

Javascript 谷歌地图标记不工作

javascript php html google-maps

Javascript 谷歌地图标记不工作,javascript,php,html,google-maps,google-maps-markers,Javascript,Php,Html,Google Maps,Google Maps Markers,我正在跟随谷歌开发者的谷歌地图教程，并试图制作一个谷歌地图标记。但是，在我成功地完成这项工作之后，地图上的图钉只显示了一个白色矩形，而不是地图图钉这是我的代码： head.php： <head> <title><?php echo $title; ?></title> <meta charset = "UTF-8"> <meta name="viewport" content="width=device-

我正在跟随谷歌开发者的谷歌地图教程，并试图制作一个谷歌地图标记。但是，在我成功地完成这项工作之后，地图上的图钉只显示了一个白色矩形，而不是地图图钉

这是我的代码：

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>

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);

我不确定它有什么好处，但在中，您为

定义了一种样式，它会影响地图（使用画布）。使用一个更具体的选择器，该选择器将地图画布排除在外，我不确定它有什么用，但您已经为影响地图（使用画布）的

定义了一种样式。使用一个更具体的选择器，它排除了

#地图画布

.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;
  }

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);