Cómo mostrar múltiples Google Maps por página con API V3

Question

Tengo la siguiente secuencia de comandos. Y quiero que aparezcan los dos mapas en la página, pero no importa lo que intento, solo puedo obtener el primer mapa initialize() para mostrar ... el segundo no. ¿Alguna sugerencia? (También, no puedo añadir que en el código, pero el primer mapa que se está mostrando en <div id="map_canvas"></div><div id="route"></div> Gracias!

<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

He aquí cómo he podido generar varios mapas en la misma página usando Google Map API V3. que este es un código fuera de serie que aborda el problema anterior.

El bit HTML

<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 para inicialización del mapa

<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

No ha definido un div con id = "map_canvas", es suficiente con ID = "map_canvas2" y id = "route2". Los identificadores div deben coincidir con el argumento en el constructor GMap()

Answer 3

acabo de terminar la adición de Google Maps a la oferta de CMS de mi empresa. Mi código permite más de un mapa en una página.

Notas:

• que utilizo jQuery
• que poner la dirección en el contenido y luego analizarlo a cabo para generar dinámicamente el mapa
• que incluyen un marcador y una ventana de información en mi mapa

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> 

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 = '<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

Aquí hay otro ejemplo, si usted tiene la longitud y latitud, en mi caso con el paquete de Umbraco Google Map Tipo de datos y dar salida a una lista de divs con clase "mapa" por ejemplo.

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

mi Javascript través de Google Maps API v3 basado en 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

miren este paquete de laravel que los últimos!

---

https://github.com/Maghrooni/googlemap

---

que le ayuda a crear uno o varios mapas en su página!

se pueden encontrar en la clase

src/googlemap.php 

Pls leído el archivo Léame primero y no se olvide de pasar diferentes de identificación si desea tener varios mapas en una página

Answer 6

OP quería dos específicas mapas, pero si desea tener un número dinámico de mapas en una página (por ejemplo, una lista de ubicaciones de los minoristas), necesita ir a otra ruta. La implementación estándar de Google Maps API define el mapa como una variable global, esto no funcionará con una cantidad dinámica de mapas. Aquí está mi código de resolver esto sin variables globales:

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

sólo tiene que pasar el ID y la dirección de cada mapa para la función para trazar el mapa y marcar la dirección.

Answer 7

Tomado de Estos ejemplos - guide, implementation.

1. establecer sus <div> 's con la adecuada id
2. incluyen las opciones de mapa de Google con foundation llamado.
3. incluyen foundation y rem js lib.

Ejemplo -

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

I tenían una cuestión especific, i tenía un solo PAG aplicación de edad y necesario para mostrar diferentes mapas, en diferentes divs, uno cada vez. Lo resolví de una manera no muy hermosa, pero de una manera funcional. En lugar de ocultar los elementos DOM con mostrar la propiedad utilicé la propiedad visibilidad para hacerlo. Con este enfoque, Google Maps API no tuvo problemas para conocer las dimensiones de los divs donde había creado una instancia de los mapas.

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

Usted podría intentar nex enfoque 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

que necesitaba para cargar número dinámica de los mapas de Google, con la ubicación dinámica s. Así que terminé con algo como esto. Espero eso ayude. Agrego LatLng como atributo de datos en el mapa div.

Por lo tanto, solo cree divs con "mapas" de clase. Cada lienzo de mapa puede tener varios ID y LatLng como este. Por supuesto, puede configurar varios atributos de datos para el zoom y, por lo tanto ...

Quizás el código sea más limpio, pero me funciona bastante bien.

<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>