Google Map中奇怪的缩放按钮样式。 有人有什么想法吗？

Question

I'm using google map JS api on the map. And the this is a wordpress website. I'm adding a google map to the contact page template. But, there are some really weird things. The Zoom In and Zoom Out button style is not + and -. Anyone has any ideas? How can I have the default + - button? JS fiddle for the Google Map Codes:

 var map; function initialize() { var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, zoom: <?php echo $map_zoom;?>, zoomControl: true, scrollwheel: false, zoomControlOptions: { style: google.maps.ZoomControlStyle.DEFAULT, position: google.maps.ControlPosition.DEFAULT }, panControl: false, streetViewControl: false, scaleControl: false, overviewMapControl: false, center: new google.maps.LatLng(<?php echo $contact_info['map']['lat'];?>,<?php echo $contact_info['map']['lng'];?>) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var infoContent = '<div class="window-content"><h4><?php echo bloginfo('name');?></h4><div class="contact-address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><?php if(isset($contact_info['address_1']) ):?><span itemprop="streetAddress"><?php echo $contact_info['address_1'];?><?php if(isset($contact_info['address_2']) ):?>,<br/><?php echo $contact_info['address_2']; ?> <?php endif;?></span><br/><?php endif;?><?php if(isset($contact_info['city']) ):?><span itemprop="addressLocality"><?php echo $contact_info['city'];?></span>&nbsp;<?php endif;?><?php if(isset($contact_info['postcode']) ):?><span itemprop="postalCode"><?php echo $contact_info['postcode'];?></span>&nbsp;<?php endif;?><?php if(isset($contact_info['state']) ):?><span itemprop="addressRegion"><?php echo $contact_info['state'];?></span><?php endif;?><?php if(isset($contact_info['country']) ):?><br/><span itemprop="addressCountry"><?php echo $contact_info['country'];?></span><?php endif;?></div></div>'; var infowindow = new google.maps.InfoWindow({ content: infoContent }); var icon = { path: 'M16.5,51s-16.5-25.119-16.5-34.327c0-9.2082,7.3873-16.673,16.5-16.673,9.113,0,16.5,7.4648,16.5,16.673,0,9.208-16.5,34.327-16.5,34.327zm0-27.462c3.7523,0,6.7941-3.0737,6.7941-6.8654,0-3.7916-3.0418-6.8654-6.7941-6.8654s-6.7941,3.0737-6.7941,6.8654c0,3.7916,3.0418,6.8654,6.7941,6.8654z', anchor: new google.maps.Point(16.5, 51), fillColor: '<?php echo $map_marker_colour;?>', fillOpacity: 0.6, strokeWeight: 0, scale: 1 }; var marker = new google.maps.Marker({ position: new google.maps.LatLng(<?php echo $contact_info['map']['lat'];?>,<?php echo $contact_info['map']['lng'];?>), map: map, icon: icon, title: 'marker' }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } google.maps.event.addDomListener(window, 'load', initialize); 

Screenshot

Answer 1

Just to make sure when you do your own style, do not let any img style overwrite the google map img style. By default it is .gm-style img{ max-width: none; } .gm-style img{ max-width: none; } If you have to use !important on some img tag, Then use: .gm-style img{ max-width: none !important; } .gm-style img{ max-width: none !important; } to fix.