谷歌地图API v3与Wordpress?不同的地图在不同的岗位上，有共同的风格

Google Maps API v3 with Wordpress? Different maps on different posts, with common styles

本文关键字：风格 地图 Wordpress API v3 谷歌地图      更新时间：2023-09-26

我已经熟悉了Google Maps PI v3，我可以用我需要的自定义标记和信息窗口制作我想要的那种地图。我似乎找不到有关将其集成到Wordpress博客之类的信息。我知道有插件，但似乎没有一个是我想要的。

下面是我想做的:在我的头文件中，包含了Google地图的基本代码，包括样式。在任何博客文章中，我都使用地图，包括地理位置，缩放级别，标记和信息窗口的特定代码。

这可能吗?我该如何设置呢?

编辑:我的最后一个例子应该是一个一般的想法…这是一个工作实现。

html 

map 1
<div class="gmap">{"center":{"lat":46.87916,"lon":-3.32910,"zoom":6},"type":"terrain","markers":[{"lat":46.87916,"lon": -3.32910,"info":"some info here"}]}</div>
map 2
<div class="gmap">{"center":{"lat":46.87916,"lon":-3.32910,"zoom":6},"type":"terrain","markers":[{"lat":46.87916,"lon": -3.32910,"info":"some info here"}]}</div>

jquery创建地图

$(".gmap").each(function() {
    var data = $.parseJSON($(this).html());
    $(this).html("");
    var myOptions = {
        zoom: data.center.zoom,
        center: new google.maps.LatLng(data.center.lat, data.center.lon),
        mapTypeId: data.type
    };
    var map = new google.maps.Map(this, myOptions);
    for (var i = 0; i < data.markers.length; i++) {
        var marker = data.markers[i];
        new google.maps.Marker({
            position: new google.maps.LatLng(marker.lat, marker.lon),
            title: marker.info,
            map: map
        });
    }
});

演示:http://jsfiddle.net/djs5x/1/

相关文章：