wordpress文章內實作Google Map嵌入代碼

1. 先作出一份可以重覆使用的代碼, 姑且就叫作 googlemap.php

可以先看這份Google Map 快速指南, 看完至少根據你的需求產生對應的嵌入碼smple

如下例 googlemap.php

<?php  $target = get_post_meta($post->ID, 'MapPoint', $single = true); //會去讀取自定欄位MapPoint的值assign給$target ?><div class="googlemap"> <?php  if ( !empty($target) ) { echo '<iframe width="750" height="500" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/search?q='. $target .'&key=填入你申請的API金鑰" allowfullscreen></iframe>';  } ?> </div>

再到single.php裡面
把 <? include(googlemap.php) ?> 放到 the_content()之後…

—

可以在wordpress單篇文章內設定:

2. 必須要申請Google Map API 的金鑰(key)

• 先去申請專案
• 啟動(enable)所需的API: (Google Maps API 適用於 Web) 而我開啟下面這三個API
  • Google Maps Embed API.
  • Google Maps JavaScript API.
  • Google Static Maps API.

另外一種做法: function.php

這個作法指需要修改function.php即可,
最好能先搞懂什麼是Wordpress的HOOK, 以及the_content()的定義, 還有一些前人的解法

function add_googlemap($content) {  global $post; $target = get_post_meta($post->ID, 'MapPoint', $single = true); $map_str = '<div class="googlemap">'; if ( !empty($target) ) { $map_str .= '<iframe width="750" height="500" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/search?q='. $target .'&key=填入你申請的API金鑰" allowfullscreen></iframe>';  } $map_str .= '</div>';  $content = $content ." ". $map_str ; $map_str = " "; return $content;}add_filter('the_content', 'add_googlemap');