Google地图“缩放”和平移按钮未显示！ 这肯定不是css问题

Question

I have a google map on my site and the map zoom and pan buttons are not displaying. I added css

Here are my Map options:

var mapOptions = {
    center : new google.maps.LatLng(22.491629,83.901082),
    zoom : 6,
    minZoom : 6,
    panControl:true,
    zoomControl:true,
    mapTypeControl:true,
    scaleControl:true,
    streetViewControl:true,
    overviewMapControl:true,
    rotateControl:true,
    zoomControlOptions : {
      position : google.maps.ControlPosition.RIGHT_CENTER
    },
    panControlOptions : {
      position : google.maps.ControlPosition.LEFT_TOP,
    },
    mapTypeId : google.maps.MapTypeId.TERRAIN,
    // styles : mapStyle,
  }

var mapElement = document.getElementById('map'); 
map = new google.maps.Map(mapElement, mapOptions);

And here is the CSS i have seen on other stackexchange answers, but not working for me

<style>
  #mapholder img {
    max-width: none !important;
  }
  #map img { max-width: none !important; }
  /* IE 6 does not support max-width so default to width 100% */
  .ie6 img {
      width:100%;
  }
  .gm-style img { max-width: none !important; }
  .gm-style label { width: auto !important; display: inline; }
</style>

And the HTML for the map

<div id="mapholder">
  <div id="map"></div>
</div>

Answer 1

I think it may be because you have not initialised the map to run, so it will not display.

You can do this by adding this line of code to your javascript:

google.maps.event.addDomListener(window, 'load', initialize);

and putting your map options in an initialise function.

Here is a working example: http://codepen.io/anon/pen/mAeLq

EDIT: I have also noticed that you have missed this link :

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>