Google Mapの奇妙なズームボタンのスタイル。誰にでもアイデアはありますか？

Question

GoogleマップのJS apiを地図上に使用しています。そして、これはWordPressのウェブサイトです。連絡先のページテンプレートにGoogleマップを追加しています。しかし、本当に奇妙なことがいくつかあります。ズームインとズームアウトのボタンスタイルは+と - ではありません。誰にでもアイデアはありますか？どうすればデフォルトの+ボタンを使用できますか？ JS fiddle for the Google Map Codes:

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

Answer 1

ちょうどあなたがあなた自身のスタイルを行う際に、任意のIMGのスタイルは、GoogleマップのIMGのスタイルを上書きさせないことを確認します。 デフォルトでは.gm-style img{ max-width: none; } いくつかのimgタグでimportantを使用する必要がある場合は、 次に：.gm-style img{ max-width: none !important; }を使用して修正してください。