Ver Mensaje Individual
  #1 (permalink)  
Antiguo 02/12/2012, 16:19
helenp
 
Fecha de Ingreso: mayo-2009
Mensajes: 382
Antigüedad: 15 años, 6 meses
Puntos: 6
google map v3, 3 maps on same page

Hola,
Tengo google maps v2 con 3 mapas en la misma página,
como necesito https: pues tengo que cambiar a v3, pero no consigo
hacer mas de un mapa en la misma página.
Esto es un mapa y necesito tener dos mas, pero con distintas coordinadas claro.

Código Javascript:
Ver original
  1. <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
  2.  
  3. <div id="map_canvas" style="width: 580px; height: 400px"></div>
  4.  
  5. <script type="text/javascript">
  6. //<![CDATA[
  7. var map = null;
  8. function initialize() {
  9.   var myOptions = {
  10.     zoom: 13,
  11.     center: new google.maps.LatLng(36.51308543049258, -4.886341094970703),
  12.     mapTypeControl: true,
  13.     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
  14.     navigationControl: true,
  15.     mapTypeId: google.maps.MapTypeId.ROADMAP
  16.   }
  17.   map = new google.maps.Map(document.getElementById("map_canvas"),
  18.                                 myOptions);
  19.  
  20.   google.maps.event.addListener(map, 'click', function() {
  21.         infowindow.close();
  22.         });
  23.  
  24.   // Add markers to the map
  25.   // Set up three markers with info windows
  26.  
  27.        
  28.       var point = new google.maps.LatLng(36.50856685143835, -4.866085052490234);
  29.       var marker = createMarker(point,'<div style="width:240px">Text here <a href="link here">Link<\/a><\/div>')
  30.      
  31.      
  32.        var point = new google.maps.LatLng(36.509653404078676, -4.91289496421814);
  33.       var marker = createMarker(point,'<div style="width:240px"Text here <a href="link here">Link<\/a><\/div>')
  34.      
  35.      
  36.         var point = new google.maps.LatLng(36.508601,-4.875945);
  37.       var marker = createMarker(point,'<div style="width:240px">Text here<a href="link here">Link<\/a><\/div>')      
  38.      
  39. }
  40.  
  41. var infowindow = new google.maps.InfoWindow(
  42.   {
  43.     size: new google.maps.Size(150,50)
  44.   });
  45.    
  46. function createMarker(latlng, html) {
  47.     var contentString = html;
  48.     var marker = new google.maps.Marker({
  49.         position: latlng,
  50.         map: map,
  51.         zIndex: Math.round(latlng.lat()*-100000)<<5
  52.         });
  53.  
  54.     google.maps.event.addListener(marker, 'click', function() {
  55.         infowindow.setContent(contentString);
  56.         infowindow.open(map,marker);
  57.         });
  58. }
  59.  
  60. </script>

Alguna idea?

Última edición por helenp; 03/12/2012 a las 02:32