Google Map中奇怪的缩放按钮样式。任何人有任何想法？

我在地图上使用谷歌地图JS api。这是一个WordPress的网站。我将谷歌地图添加到联系人页面模板。但是，有一些非常奇怪的事情。放大和缩小按钮样式不是+和 - 。任何人有任何想法？我怎样才能有默认的+ - 按钮？ JS fiddle for the Google Map Codes:Google Map中奇怪的缩放按钮样式。任何人有任何想法？

var map; 
 
\t function initialize() { 
 

 
\t \t var mapOptions = { 
 
\t \t \t mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
\t \t \t mapTypeControl: false, 
 
\t \t \t zoom: <?php echo $map_zoom;?>, 
 
\t \t \t zoomControl: true, 
 
\t \t \t scrollwheel: false, 
 
\t \t \t zoomControlOptions: { 
 
\t \t \t \t style: google.maps.ZoomControlStyle.DEFAULT, 
 
\t \t \t \t position: google.maps.ControlPosition.DEFAULT 
 
\t \t \t }, 
 
\t \t \t panControl: false, 
 
\t \t \t streetViewControl: false, 
 
\t \t \t scaleControl: false, 
 
\t \t \t overviewMapControl: false, 
 
\t \t \t center: new google.maps.LatLng(<?php echo $contact_info['map']['lat'];?>,<?php echo $contact_info['map']['lng'];?>) 
 
\t \t }; 
 

 
\t \t map = new google.maps.Map(document.getElementById('map-canvas'), 
 
\t \t \t mapOptions); 
 

 
\t \t 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>'; 
 

 
\t \t var infowindow = new google.maps.InfoWindow({ 
 
\t \t \t content: infoContent 
 
\t \t }); 
 

 
\t \t var icon = { 
 
\t \t \t 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', 
 
\t \t \t anchor: new google.maps.Point(16.5, 51), 
 
\t \t \t fillColor: '<?php echo $map_marker_colour;?>', 
 
\t \t \t fillOpacity: 0.6, 
 
\t \t \t strokeWeight: 0, 
 
\t \t \t scale: 1 
 
\t \t }; 
 

 
\t \t var marker = new google.maps.Marker({ 
 
\t \t \t position: new google.maps.LatLng(<?php echo $contact_info['map']['lat'];?>,<?php echo $contact_info['map']['lng'];?>), 
 
\t \t \t map: map, 
 
\t \t \t icon: icon, 
 
\t \t \t title: 'marker' 
 
\t \t }); 
 

 
\t \t google.maps.event.addListener(marker, 'click', function() { 
 
\t \t \t infowindow.open(map,marker); 
 
\t \t }); 
 
\t } 
 

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

Screenshot

来源

2016-11-25 Kyle

只是为了确保当你做你自己的风格，不要让任何IMG风格覆盖谷歌地图IMG风格。！默认情况下它是.gm-style img{ max-width: none; } 如果你必须使用一些img标签很重要，然后使用：.gm-style img{ max-width: none !important; }修复。

来源

2016-11-25 18:07:59 Kyle

我也建议你作序即将与您的地图，如果你只是去一次或两次，前使用它的容器的类名来覆盖任何风格。 '.container .my-map {}' – vladdobra

这也是一个好点！我忘了提及。谢谢！ – Kyle

Google Map中奇怪的缩放按钮样式。任何人有任何想法？

回答

相关问题