在同一页面上添加 2 个具有不同坐标的谷歌地图

Question

我一直在使用 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">

提前感谢您的帮助！

Answer 1

您必须在对查询的调用结束时添加一个随机键。这是一个使用 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);
   });

})

Answer 2

即使没有任何 PHP 知识，您也应该能够管理添加地图，代码使用 Google Maps API v3。您可以使用 JavaScript 轻松添加另一个地图。首先添加另一个 ID 为 map_canvas_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>

这将显示以您在map_canvas_2 div 中指定的坐标为中心的地图。你可以在这里找到更多信息：https://google-developers.appspot.com/maps/documentation/javascript/reference

JsFiddle 在这里：http://jsfiddle.net/Chycx/2/