「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

TCDテーマAVALON:GoogleMapの拡大率(縮尺)を変更する方法

TCDテーマAVALONの固定ページにGoogleMapを埋め込んだ際に、「もう少しこの部分まで表示したい」なんてことはないでしょうか?

今回は表示される地図の縮尺を変更するカスタマイズ方法について解説していきます。
下記のようにカスタマイズ修正していただくと小さくすることができます。

※カスタマイズをされる場合は必ずバックアップしてからおこなってください。

1.カスタマイズするCSSを表示させる

管理画面から【外観】にマウスをあてていただき、【テーマの編集】ボタンをクリックしていただきます。

次に画面を右側に【template_access.php】がありますのでクリックして下さい。

2.下記コードを編集します。

<修正コード>


<script type="text/javascript">
                    google.maps.event.addDomListener(window, 'load', function(){
                        var geocoder = new google.maps.Geocoder();
                        var disabled = true ? false : true;
                        var draggable = true;
                        geocoder.geocode({'address':'<?php echo
esc_attr($type6_map_addr); ?>'}, function(results, status) {
                            if (status == google.maps.GeocoderStatus.OK){
                                var mapOptions = {
                                    draggable:
jQuery(document).width() > 480 && draggable == true ? true : false,
                                    center: results[0].geometry.location,
                                    zoom: 18,
                                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                                    scrollwheel: false,
                                    disableDefaultUI: disabled,
                                    disableDoubleClickZoom: disabled,
                                    styles: []
                                };
                               

↓↓↓↓
<修正箇所>

 zoom: 18

18の数字を小さくすると縮小され、大きくすると拡大します。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事