Como exibir vários mapas do Google por página com a API V3

Eu tenho o seguinte script. E eu quero fazer ambos os mapas aparecerem na página, mas não importa o que eu tente, eu só posso colocar o primeiro mapa initialize () para exibir … o segundo não. Alguma sugestão? (também, não posso adicioná-lo no código, mas o primeiro mapa está sendo exibido em

Obrigado!

  // 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:  "); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); }  
// 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()); } function loadmaps(){ initialize(); initialize2(); }

Veja como consegui gerar vários mapas na mesma página usando a Google Map API V3 . Por favor, note que este é um código fora do punho que resolve o problema acima.

O bit HTML

 

Javascript para boot do mapa

  

Acabei de adicionar o Google Maps à oferta de CMS da minha empresa. Meu código permite mais de um mapa em uma página.

Notas:

  • Eu uso jQuery
  • Eu coloquei o endereço no conteúdo e, em seguida, analise-o para gerar dinamicamente o mapa
  • Eu incluo um Marcador e uma InfoWindow no meu mapa

HTML:

 
Middle East Bakery & Grocery
327 5th St
West Palm Beach
FL
33401-3995
USA
(561) 659-4050
14
Global Design, Inc
3434 SW Ash Pl
Palm City
FL
34990
USA
17

Código:

 $(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 = '' + $infotext.children('.location').text() + '
' + $infotext.children('.address').text() + '
' + $infotext.children('.city').text() + ', ' + $infotext.children('.state').text() + ' ' + $infotext.children('.zip').text() ; if (0 < $infotext.children('.phone').text().length) { content += '
' + $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); } }); }); });

Aqui está outro exemplo se você tem o long e o lat, no meu caso usando o pacote Umbraco Google Map Datatype e produzindo uma lista de divs com a class “map”, por exemplo.

 
52.21454000000001,0.14044490000003407,13

meu JavaScript usando a API do Google Maps v3 com base nos exemplos do Cultiv Razor

 $('.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 }); }); 

OP queria dois mapas específicos, mas se você gostaria de ter um número dynamic de mapas em uma página (por exemplo, uma lista de locais de revenda), você precisa seguir outra rota. A implementação padrão da API do Google Maps define o mapa como uma variável global, isso não funcionará com um número dynamic de mapas. Aqui está o meu código para resolver isso sem variables ​​globais:

 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); } }); } 

Basta passar o ID e endereço de cada mapa para a function para traçar o mapa e marcar o endereço.

Extraído desses exemplos – guia , implementação .

  1. defina seus

    com o id apropriado

  2. inclua as opções do Google Map com chamadas de foundation .
  3. inclua foundation e rem js lib.

Exemplo –

index.html –

 

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" }); } 

Eu precisava carregar um número dynamic de mapas do Google, com locais dynamics. Então acabei com algo assim. Espero que ajude. Eu adiciono LatLng como atributo de dados no mapa div.

Então, basta criar divs com class “mapas”. Cada canvas de mapa pode ter vários IDs e LatLng assim. Claro que você pode configurar vários atributos de dados para zoom e assim …

Talvez o código esteja mais limpo, mas funciona muito bem para mim.

 

Você não definiu um div com id = “map_canvas”, você só tem id = “map_canvas2” e id = “route2”. As div ids precisam corresponder ao argumento no construtor GMap ().

Você poderia tentar nex abordagem css

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

HTML

 @foreach(var map in maps) { 
}

JavaScript

    

Eu tinha um problema específico, eu tinha um Single Page App e precisava mostrar diferentes mapas, em diferentes divs, um de cada vez. Eu resolvi isso de uma maneira não muito bonita, mas funcionalmente. Em vez de ocultar os elementos DOM com propriedade de exibição, usei a propriedade de visibilidade para fazer isso. Com essa abordagem, a API do Google Maps não teve problemas em saber as dimensões dos divs em que eu instanciei os mapas.

 var maps_qty; for (var i = 1; i <= maps_qty; i++) { $(".append_container").append('
' + '
'+'
'); 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 );

Dê uma olhada neste pacote para o Laravel que eu fiz recentemente!


https://github.com/Maghrooni/googlemap


ajuda-o a criar um ou vários mapas na sua página!

você pode encontrar a class em

 src/googlemap.php 

Pls Leia o arquivo readme primeiro e não se esqueça de passar ID diferente se você quiser ter vários mapas em uma página