Cách hiển thị nhiều Google Maps trên mỗi trang với API V3

Question

Tôi có tập lệnh sau. Và tôi muốn làm cho cả hai bản đồ xuất hiện trên trang, nhưng không có vấn đề gì tôi cố gắng tôi chỉ có thể có được bản đồ đầu tiên khởi tạo() để hiển thị ... thứ hai không. Bất kỳ đề xuất? (Còn, tôi không thể thêm nó vào mã này, nhưng bản đồ đầu tiên đang được hiển thị trong <div id="map_canvas"></div><div id="route"></div> Cảm ơn!

<script type="text/javascript"> 
// Create a directions object and register a map and DIV to hold the 
// resulting computed directions 

var map; 
var directionsPanel; 
var directions; 

function initialize() { 
    map = new GMap(document.getElementById("map_canvas")); 
    map.setCenter(new GLatLng(41.1255275,-73.6964801), 15); 
    directionsPanel = document.getElementById("route"); 
    directions = new GDirections(map, directionsPanel); 
    directions.load("from: Armonk Fire Department, Armonk NY to: <?php echo $LastCallGoogleAddress;?> "); 

    map.addControl(new GSmallMapControl()); 
    map.addControl(new GMapTypeControl()); 
} 

</script> 


<div id="map_canvas2" style="width:200px; height:200px;"></div> 
<div id="route2"></div> 

<script type="text/javascript"> 
// Create a directions object and register a map and DIV to hold the 
// resulting computed directions 

var map2; 
var directionsPanel2; 
var directions2; 

function initialize2() { 
    map2 = new GMap(document.getElementById("map_canvas2")); 
    map2.setCenter(new GLatLng(41.1255275,-73.6964801), 15); 
    directionsPanel2 = document.getElementById("route2"); 
    directions2 = new GDirections(map2, directionsPanel2); 
    directions2.load("from: ADDRESS1 to: ADDRESS2 "); 

    map2.addControl(new GSmallMapControl()); 
    map2.addControl(new GMapTypeControl()); 
} 

</script> 

<script type="text/javascript"> 
function loadmaps(){ 
    initialize(); 
    initialize2(); 
} 
</script> 

Answer 1

Đây là cách tôi có thể tạo nhiều bản đồ trên cùng một trang bằng cách sử dụng Google Map API V3. rằng đây là mã tắt mã vạch giải quyết vấn đề ở trên.

HTML bit

<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;"></div> 
<div id="map_canvas2" style="width:700px; height:500px; margin-left:80px;"></div> 

Javascript cho bản đồ khởi

<script type="text/javascript"> 
var map, map2; 

function initialize(condition) { 
    // create the maps 
    var myOptions = { 
     zoom: 14, 
     center: new google.maps.LatLng(0.0, 0.0), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions); 
} 
</script> 

Answer 2

Bạn chưa xác định một div với id = "map_canvas", bạn chỉ có id = "map_canvas2" và id = "route2" Các id div cần khớp với đối số trong hàm tạo GMap()

Answer 3

Tôi vừa hoàn tất việc thêm Google Maps để CMS cung cấp của công ty tôi. Mã của tôi cho phép nhiều hơn một bản đồ trong một trang.

Ghi chú:

• tôi sử dụng jQuery
• tôi đặt địa chỉ trong nội dung và sau đó phân tích nó ra để tự động tạo ra các bản đồ
• tôi bao gồm một Marker và một InfoWindow trong bản đồ của tôi

HTML:

<div class="block maps first"> 
    <div class="content"> 
     <div class="map_canvas"> 
      <div class="infotext"> 
       <div class="location">Middle East Bakery & Grocery</div> 
       <div class="address">327 5th St</div> 
       <div class="city">West Palm Beach</div> 
       <div class="state">FL</div> 
       <div class="zip">33401-3995</div> 
       <div class="country">USA</div> 
       <div class="phone">(561) 659-4050</div> 
       <div class="zoom">14</div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="block maps last"> 
    <div class="content"> 
     <div class="map_canvas"> 
      <div class="infotext"> 
       <div class="location">Global Design, Inc</div> 
       <div class="address">3434 SW Ash Pl</div> 
       <div class="city">Palm City</div> 
       <div class="state">FL</div> 
       <div class="zip">34990</div> 
       <div class="country">USA</div> 
       <div class="phone"></div> 
       <div class="zoom">17</div> 
      </div> 
     </div> 
    </div> 
</div> 

Code:

$(document).ready(function() { 
    $maps = $('.block.maps .content .map_canvas'); 
    $maps.each(function(index, Element) { 
     $infotext = $(Element).children('.infotext'); 

     var myOptions = { 
      'zoom': parseInt($infotext.children('.zoom').text()), 
      'mapTypeId': google.maps.MapTypeId.ROADMAP 
     }; 
     var map; 
     var geocoder; 
     var marker; 
     var infowindow; 
     var address = $infotext.children('.address').text() + ', ' 
       + $infotext.children('.city').text() + ', ' 
       + $infotext.children('.state').text() + ' ' 
       + $infotext.children('.zip').text() + ', ' 
       + $infotext.children('.country').text() 
     ; 
     var content = '<strong>' + $infotext.children('.location').text() + '</strong><br />' 
       + $infotext.children('.address').text() + '<br />' 
       + $infotext.children('.city').text() + ', ' 
       + $infotext.children('.state').text() + ' ' 
       + $infotext.children('.zip').text() 
     ; 
     if (0 < $infotext.children('.phone').text().length) { 
      content += '<br />' + $infotext.children('.phone').text(); 
     } 

     geocoder = new google.maps.Geocoder(); 
     geocoder.geocode({'address': address}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       myOptions.center = results[0].geometry.location; 
       map = new google.maps.Map(Element, myOptions); 
       marker = new google.maps.Marker({ 
        map: map, 
        position: results[0].geometry.location, 
        title: $infotext.children('.location').text() 
       }); 
       infowindow = new google.maps.InfoWindow({'content': content}); 
       google.maps.event.addListener(map, 'tilesloaded', function(event) { 
        infowindow.open(map, marker); 
       }); 
       google.maps.event.addListener(marker, 'click', function() { 
        infowindow.open(map, marker); 
       }); 
      } else { 
       alert('The address could not be found for the following reason: ' + status); 
      } 
     }); 
    }); 
}); 

Answer 4

Dưới đây là một ví dụ khác nếu bạn có dài và lat, trong trường hợp của tôi sử dụng Umbraco Google Map Datatype gói và xuất danh sách các div với class "bản đồ" ví dụ.

<div class="map" id="UK">52.21454000000001,0.14044490000003407,13</div> 

JavaScript của tôi sử dụng Google Maps API v3 dựa trên Cultiv Razor examples

$('.map').each(function (index, Element) { 
    var coords = $(Element).text().split(","); 
    if (coords.length != 3) { 
     $(this).display = "none"; 
     return; 
    } 
    var latlng = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1])); 
    var myOptions = { 
     zoom: parseFloat(coords[2]), 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     disableDefaultUI: false, 
     mapTypeControl: true, 
     zoomControl: true, 
     zoomControlOptions: { 
      style: google.maps.ZoomControlStyle.SMALL 
     } 
    }; 
    var map = new google.maps.Map(Element, myOptions); 

    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map 
    }); 
}); 

Answer 5

Hãy Nhìn vào Bundle này cho Laravel mà tôi thực hiện gần đây!

---

https://github.com/Maghrooni/googlemap

---

nó giúp bạn tạo một hoặc nhiều bản đồ trong trang của mình!

bạn có thể tìm thấy những lớp trên

src/googlemap.php 

Xin vui lòng đọc file readme đầu tiên và đừng quên để vượt qua ID khác nhau nếu bạn muốn có nhiều Maps trong một trang

Answer 6

OP muốn hai cụ bản đồ, nhưng nếu bạn muốn có số lượng bản đồ động trên một trang (ví dụ: danh sách các vị trí của nhà bán lẻ), bạn cần phải đi một tuyến đường khác. Việc triển khai chuẩn API bản đồ của Google xác định bản đồ dưới dạng biến toàn cầu, điều này sẽ không hoạt động với số lượng bản đồ động. Đây là mã của tôi để giải quyết vấn đề này mà không có biến toàn cầu:

function mapAddress(mapElement, address) { 
var geocoder = new google.maps.Geocoder(); 

geocoder.geocode({ 'address': address }, function (results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     var mapOptions = { 
      zoom: 14, 
      center: results[0].geometry.location, 
      disableDefaultUI: true 
     }; 
     var map = new google.maps.Map(document.getElementById(mapElement), mapOptions); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
    } else { 
     alert("Geocode was not successful for the following reason: " + status); 
    } 
}); 
} 

Chỉ cần chuyển ID và địa chỉ của mỗi bản đồ vào hàm để vẽ bản đồ và đánh dấu địa chỉ.

Answer 7

Lấy từ các ví dụ này - guide, implementation.

1. thiết lập của bạn <div> 's với thích hợp id
2. bao gồm các tùy chọn Google Map với foundation gọi.
3. bao gồm foundation và rem js lib.

Ví dụ -

index.html -

<div class="row"> 
    <div class="large-6 medium-6 "> 
     <div id="map_canvas" class="google-maps"> 
     </div> 
    </div> 
    <br> 
    <div class="large-6 medium-6 "> 
     <div id="map_canvas_2" class="google-maps"></div> 
    </div> 
</div> 
<script src="/js/foundation.js"></script> 
<script src="/js/google_maps_options.js"></script> 
<script src="/js/rem.js"></script> 
<script> 
    jQuery(function(){ 
     setTimeout(initializeGoogleMap,700); 
    }); 
</script> 

google_maps_options.js -

function initializeGoogleMap() 
{ 
    $(document).foundation(); 
    var latlng = new google.maps.LatLng(28.561287,-81.444465); 
    var latlng2 = new google.maps.LatLng(28.507561,-81.482359); 

    var myOptions = 
    { 
     zoom: 13, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var myOptions2 = 
    { 
     zoom: 13, 
     center: latlng2, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 


    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2); 


    var myMarker = new google.maps.Marker(
    { 
     position: latlng, 
     map: map, 
     title:"Barnett Park" 
    }); 

    var myMarker2 = new google.maps.Marker(
    { 
     position: latlng2, 
     map: map2, 
     title:"Bill Fredrick Park at Turkey Lake" 
    }); 


} 

Answer 8

Tôi có một vấn đề especific, tôi đã có một đơn P ứng dụng tuổi và cần phải hiển thị các bản đồ khác nhau, trong các div khác nhau, mỗi lần một. Tôi giải quyết nó không phải là một cách rất đẹp nhưng một cách chức năng. Thay vì ẩn các phần tử DOM có hiển thị thuộc tính tôi đã sử dụng chế độ hiển thị để làm điều đó. Với cách tiếp cận này, API Google Maps không gặp khó khăn gì về việc biết kích thước của các div nơi tôi đã tạo ra các bản đồ.

Answer 9

var maps_qty; 
for (var i = 1; i <= maps_qty; i++) 
    { 
     $(".append_container").append('<div class="col-lg-10 grid_container_'+ (i) +'" >' + '<div id="googleMap'+ i +'" style="height:300px;"></div>'+'</div>'); 
     map = document.getElementById('googleMap' + i); 
     initialize(map,i); 
    } 

// Intialize Google Map with Polyline Feature in it. 

function initialize(map,i) 
    { 
     map_index = i-1; 
     path_lat_long = []; 
     var mapOptions = { 
      zoom: 2, 
      center: new google.maps.LatLng(51.508742,-0.120850) 
     }; 

     var polyOptions = { 
      strokeColor: '#000000', 
      strokeOpacity: 1.0, 
      strokeWeight: 3 
     }; 

     //Push element(google map) in an array of google maps 
     map_array.push(new google.maps.Map(map, mapOptions)); 
     //For Mapping polylines to MUltiple Google Maps 
     polyline_array.push(new google.maps.Polyline(polyOptions)); 
     polyline_array[map_index].setMap(map_array[map_index]); 
    } 

// For Resizing Maps Multiple Maps. 

google.maps.event.addListener(map, "idle", function() 
    { 
     google.maps.event.trigger(map, 'resize'); 
    }); 

map.setZoom(map.getZoom() - 1); 
map.setZoom(map.getZoom() + 1); 

Answer 10

Bạn có thể thử nex tiếp cận css

.map { 
      height: 300px; 
      width: 100%; 
     } 

HTML

@foreach(var map in maps) 
{ 
    <div id="map-@map.Id" lat="@map.Latitude" lng="@map.Longitude" class="map"> 
    </div> 
} 

Javascript

<script> 
    var maps = []; 
    var markers = []; 
    function initMap() { 
     var $maps = $('.map'); 
     $.each($maps, function (i, value) { 
      var uluru = { lat: parseFloat($(value).attr('lat')), lng: parseFloat($(value).attr('lng')) }; 

      var mapDivId = $(value).attr('id'); 

      maps[mapDivId] = new google.maps.Map(document.getElementById(mapDivId), { 
       zoom: 17, 
       center: uluru 
      }); 

      markers[mapDivId] = new google.maps.Marker({ 
       position: uluru, 
       map: maps[mapDivId] 
      }); 
     }) 
    } 
</script> 

<script async defer 
     src="https://maps.googleapis.com/maps/api/js?language=ru-Ru&key=YOUR_KEY&callback=initMap"> 
</script> 

Answer 11

tôi cần thiết để tải số năng động của bản đồ google, với vị trí năng động S. Vì vậy, tôi đã kết thúc với một cái gì đó như thế này. Hy vọng nó giúp. Tôi thêm LatLng làm thuộc tính dữ liệu trên div bản đồ.

Vì vậy, chỉ cần tạo div với lớp "bản đồ". Mỗi khung bản đồ có thể có nhiều ID khác nhau và LatLng như thế này. Tất nhiên bạn có thể thiết lập các thuộc tính dữ liệu khác nhau để thu phóng và vì vậy ...

Có thể mã có thể sạch hơn, nhưng nó hoạt động tốt cho tôi.

<div id="map123" class="maps" data-gps="46.1461154,17.1580882"></div> 
<div id="map456" class="maps" data-gps="45.1461154,13.1080882"></div> 

    <script> 
     var map; 
     function initialize() { 
     // Get all map canvas with ".maps" and store them to a variable. 
     var maps = document.getElementsByClassName("maps"); 

     var ids, gps, mapId = ''; 

     // Loop: Explore all elements with ".maps" and create a new Google Map object for them 
     for(var i=0; i<maps.length; i++) { 

      // Get ID of single div 
      mapId = document.getElementById(maps[i].id); 

      // Get LatLng stored in data attribute. 
      // !!! Make sure there is no space in data-attribute !!! 
      // !!! and the values are separated with comma !!! 
      gps = mapId.getAttribute('data-gps'); 

      // Convert LatLng to an array 
      gps = gps.split(","); 

      // Create new Google Map object for single canvas 
      map = new google.maps.Map(mapId, { 
      zoom: 15, 
      // Use our LatLng array bellow 
      center: new google.maps.LatLng(parseFloat(gps[0]), parseFloat(gps[1])), 
      mapTypeId: 'roadmap', 
      mapTypeControl: true, 
      zoomControlOptions: { 
       position: google.maps.ControlPosition.RIGHT_TOP 
      } 
      }); 

      // Create new Google Marker object for new map 
      var marker = new google.maps.Marker({ 
      // Use our LatLng array bellow 
      position: new google.maps.LatLng(parseFloat(gps[0]), parseFloat(gps[1])), 
      map: map 
      }); 
     } 
     } 
    </script>