能否在WordPress网站嵌入Google My Map邮编搜索功能？

核心思路 #

Google My Map支持通过URL参数q直接触发地图内搜索，我们只需要构建一个简单的表单，让用户输入邮编后自动跳转到带搜索参数的My Map页面即可，不需要复杂的API或付费服务。

具体步骤 #

1. 获取你的Google My Map基础URL
   点击嵌入地图上的「查看更大地图」，复制跳转后的完整URL，比如：
   https://www.google.com/maps/d/u/0/viewer?mid=123abcXYZ&hl=zh-CN
   这个URL就是我们表单提交的目标地址。

2. 添加邮编搜索表单
   在WordPress页面的合适位置（比如地图上方）添加以下HTML代码：

<div class="zip-search-form">
  <form action="你的Google My Map基础URL" method="GET">
    <input type="text" name="q" placeholder="输入邮编查看配送范围" required>
    <button type="submit">搜索</button>
  </form>
</div>

<style>
/* 可选：美化表单样式适配你的主题 */
.zip-search-form {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}
.zip-search-form input {
  padding: 8px 12px;
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.zip-search-form button {
  padding: 8px 16px;
  background: #0073aa;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

把代码里的你的Google My Map基础URL替换成你刚才复制的地址即可。

3. 嵌入到WordPress页面

• 若使用Gutenberg编辑器：添加「自定义HTML」区块，粘贴上面的代码。
• 若使用经典编辑器：切换到「文本」模式，粘贴代码。
• 若需多页面复用：将代码封装成短代码，在主题的functions.php里添加：

function zip_search_shortcode() {
  $map_url = '你的Google My Map基础URL';
  ob_start();
  ?>
  <div class="zip-search-form">
    <form action="<?php echo esc_url($map_url); ?>" method="GET">
      <input type="text" name="q" placeholder="输入邮编查看配送范围" required>
      <button type="submit">搜索</button>
    </form>
  </div>
  <style>
  .zip-search-form {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
  }
  .zip-search-form input {
    padding: 8px 12px;
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  .zip-search-form button {
    padding: 8px 16px;
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  </style>
  <?php
  return ob_get_clean();
}
add_shortcode('zip_map_search', 'zip_search_shortcode');

之后在页面里用[zip_map_search]短代码就能调用这个表单了。

验证效果 #

输入邮编提交后，会直接跳转到你的Google My Map页面，并且自动在地图内搜索该邮编，定位到对应的区域，和手动点击「搜索此地图」输入邮编的效果完全一致。

内容的提问来源于stack exchange，提问作者Merlin