Html 在同一页面上添加两个不同坐标的谷歌地图

我一直在使用wordpress主题，它支持在菜单中添加坐标，并在联系人页面上直接显示地图。现在我有了一个新的业务地址，需要添加到联系人地图中，但主题不支持

鉴于我在php和js方面的经验有限，我无法找到解决问题的方法

我的联系人页面代码如下，我所需要的是在联系人表单之前添加一个新的带有不同坐标的地图

<div id="content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : 
        the_post();
        $show_map = get_option('theme_gmap_show');
        if($show_map == 'true')
        {
        $map_lati = get_option('theme_gmap_lati');
        $map_longi = get_option('theme_gmap_longi');
        $map_zoom = get_option('theme_gmap_zoom');
    ?>                                                   
    <div class="map-container clearfix">
            <div id="map_canvas"></div>                         
            <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
            <script type="text/javascript">
            function initialize() 
            {
            var geocoder  = new google.maps.Geocoder();
            var map;
            var latlng = new google.maps.LatLng(<?php echo $map_lati; ?>, <?php echo $map_longi; ?>);
            var infowindow = new google.maps.InfoWindow();
            var myOptions = { 
                zoom: <?php echo $map_zoom; ?>,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            geocoder.geocode( { 'location': latlng }, 
              function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) 
                {
                  map.setCenter(results[0].geometry.location);
                  var marker = new google.maps.Marker({
                       map: map, 
                       position: results[0].geometry.location
                  });                                                                                                
                } 
                else 
                {
                  alert("Geocode was not successful for the following reason: " + status);
                }
             });
           }
           initialize();
           </script>        
          </div>                                                                                                                                
    <?php                                                   
    } 
    the_content(); 
            $postal_address = stripslashes(get_option('theme_postal_address'));
    if(!empty($postal_address))
    {
    ?>                                                                                                                                                                  
            <h3 class="smart-head">Adresa de contact</h3>
    <p><address>
   <?php echo $postal_address; ?>
</address></p>
<?php
}
?>
     <div class="contact-orar">
     <h3 class="smart-head">Program de Lucru</h3>
     <p><strong>Luni - Vineri:</strong> 8:00 - 17:00<br />
     <strong>Sambata:</strong> 8:00 - 14:00<br />
     <strong>Duminica:</strong> inchis</p>
     </div>
     <div class="contact-form-container">

函数初始化（）
{
var geocoder=new google.maps.geocoder（）；
var映射；
var latlng=新的google.maps.latlng（，）；
var infowindow=new google.maps.infowindow（）；
变量myOptions={
缩放：，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
geocoder.geocode（{'location'：latlng}，
功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）
{
map.setCenter（结果[0].geometry.location）；
var marker=new google.maps.marker({
地图：地图，
位置：结果[0]。几何体。位置
});                                                                                                
} 
其他的
{
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
}
初始化（）；
接触肾上腺


卢克鲁计划
Luni-Vineri:8:00-17:00

Sambata:8:00-14:00

Duminica:inchis

---

提前感谢您的帮助

即使没有任何

PHP

知识，您也应该能够管理添加地图，代码使用Google Maps API v3。您可以使用JavaScript轻松地添加另一个映射。首先，添加另一个ID为

map\u canvas\u 2

的div，然后应使用以下Javascript代码：

<script>
  var map;

  function initialize() {
    var mapOptions = {
      zoom: 6,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: new google.maps.LatLng(/*latitude here*/,/*longitude here*/)
    };
    map = new google.maps.Map(document.getElementById('map_canvas_2'),
        mapOptions);
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

var映射；
函数初始化（）{
变量映射选项={
缩放：6，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：新的google.maps.LatLng（/*纬度这里*/，/*经度这里*/）
};
map=new google.maps.map（document.getElementById（'map\u canvas\u 2'），
地图选项）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

这将显示一张以您在

map\u canvas\u 2

div中指定的坐标为中心的地图。您可以在此处找到更多信息：

---

jsiddle here:

您必须在查询调用的末尾添加一个随机键。这是一个使用KML层的示例，但概念相同

$( function() {

   $(".map_canvas").each( function() {

           var theElement = $(this).attr('id');
           var lat = $(this).attr('lat');
           var lon = $(this).attr('lon');
           var kml = $(this).attr('kml');

           var mapCenter = new google.maps.LatLng(lat,lon);
           var mapOptions = {
             zoom: 14,
             center: mapCenter,
             mapTypeId: google.maps.MapTypeId.ROADMAP
           }

           var map = new google.maps.Map(document.getElementById(theElement), mapOptions);
           var geopoints = new google.maps.KmlLayer('http://blah.com/temps/kmls/' + kml + '.kml?run=' + (new Date()).getTime() ); //?nocache=0
           geopoints.setMap(map);
   });

})

---

原因是谷歌缓存了你网站上的查询，以减轻他们服务器上的负载。第二个调用只是获取一个缓存的映射。此代码不起作用。它看起来无法从google加载第二个映射。很抱歉，我编写了

map-canvas\u 2

而不是

map\u canvas\u 2

。我更新了代码。请再试一次。