添加

Question

同一頁

我一直使用具有隻需添加座標在菜單中直接顯示聯繫人頁面在地圖的支持，一個WordPress主題2張使用不同的座標谷歌地圖。現在我有一個新的業務地址需要添加到聯繫人地圖中，但主題不支持。

給予的事實，我在PHP和JS的經驗是有限的我找不到我的問題的解決方案。

我的聯繫人頁面代碼是波紋管和所有我需要的是聯繫表格之前添加不同COORDS新地圖。

<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

即使沒有任何PHP知識，你應該能夠管理添加地圖，代碼使用谷歌地圖API第3版。您可以輕鬆地使用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/

Answer 2

你有一個隨機密鑰添加到呼叫到您的查詢的末尾。這是一個使用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); 
    }); 

})