Google Maps - Due mappe in una pagina

**alfa038** · 19-01-2009, 10:40

Buongiorno,

ho un cliente che ha 2 sedi commerciali e vorrebbe mettere, su un'unica pagina, due mappe: la mappa dell'una e la mappa dell'altra sede.

Al momento, attraverso il codice API, sono in grado di mettere una sola mappa in una pagina ma non so come fare per metterne due relative a due località diverse.

Spero di essermi spiegato.

Potete aiutarmi?

Grazie

**weppos** · 19-01-2009, 10:46

Sposto in JavaScript.

**Mistergions** · 16-09-2010, 12:46

Qualcuno ha qualche consiglio su come mettere 2 mappe in una pagina utilizzando API Google Maps?

codice:

var map;
var birmingham = new google.maps.LatLng(coordinate, coordinate);


/**
 * The HomeControl adds a control to the map that simply
 * returns the user to London. This constructor takes
 * the control DIV as an argument.
 */

function HomeControl(controlDiv, map) {

  // Set CSS styles for the DIV containing the control
  // Setting padding to 5 px will offset the control
  // from the edge of the map
  controlDiv.style.padding = '5px';

  // Set CSS for the control border
  var controlUI = document.createElement('DIV');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior
  var controlText = document.createElement('DIV');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = 'Title';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to
  // london
  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(london)
  });

}

function initialize() {
  var mapDiv = document.getElementById('map_canvas');
  var myOptions = {
    zoom: 15,
    center: london,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true

  }
  map = new google.maps.Map(mapDiv, myOptions);

var infowindow = new google.maps.InfoWindow(
    { content: 'content',
      position: london
    });
  infowindow.open(map);


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


  // Create the DIV to hold the control and
  // call the HomeControl() constructor passing
  // in this DIV.
  var homeControlDiv = document.createElement('DIV');
  var homeControl = new HomeControl(homeControlDiv, map);

  homeControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}

Devo creare un altro script con coordinate diverse ed ovviamente anche nomi diversi di funzioni e variabili? Creando un'altra funzione che stampa la mappa posso, posso aggiungere 2 onload nel body?

**Mistergions** · 16-09-2010, 18:01

2 O PIU' MAPPE NELLA STESSA PAGINA

codice:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        var latlng = new google.maps.LatLng(40.7562008,-73.9903784);
        var latlng2 = new google.maps.LatLng(37.3316591,-122.0301778);
        var myOptions = {
        zoom: 18,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var myOptions2 = {
        zoom: 15,
        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:"About.com Headquarters" });
        var myMarker2 = new google.maps.Marker({ position: latlng2, map: map2, title:"Apple Computer" });
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:300px; height:300px;"></div>
    <div id="map_canvas_2" style="width:300px; height:300px;"></div>
  </body>

Discussione: Google Maps - Due mappe in una pagina

Strumenti discussione

Ricerca discussione

Visualizza

Google Maps - Due mappe in una pagina

Permessi di invio