I'm pretty new to Javascript and I am not able to add a marker to these google maps API's. I was able to add one map with a marker using W3schools tutorial, but when I try to add multiple maps with one marker on each one, this is where I am running into problems. I have searched for an answer on here already, and I was not able to find a working solution. In the picture I have posted, I have not yet added the "var marker" constructor because I am not sure where to put it?  Can someone kindly point me in the right direction, and tell me where I am going wrong?

Javascript en cuestión:

function myMap() {
  var mapOptions1 = {
    center: new google.maps.LatLng(42.9814362, -81.2267205),
    zoom:15,
    mapTypeId: google.maps.MapTypeId.ROADMAP

};
  var mapOptions2 = {
    center: new google.maps.LatLng(42.9421287, -81.2284421),
    zoom:15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map1 = new google.maps.Map(document.getElementById("googleMap1"),mapOptions1);
  var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapOptions2);
}

Lo que creo que tengo que agregar, pero no estoy seguro de dónde, o incluso cómo:

var marker = new google.maps.Marker({position: myCenter});

marker.setMap(map); 
0
rc car 3 nov. 2017 a las 21:31

2 respuestas

La mejor respuesta

Debe asignar un centro válido para cada marcador en cada mapa

  function myMap() {
    var mapOptions1 = {
      center: new google.maps.LatLng(42.9814362, -81.2267205),
      zoom:15,
      mapTypeId: google.maps.MapTypeId.ROADMAP

  };
    var mapOptions2 = {
      center: new google.maps.LatLng(42.9421287, -81.2284421),
      zoom:15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map1 = new google.maps.Map(document.getElementById("googleMap1"),mapOptions1);
    var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapOptions2);

    var marker1 = new google.maps.Marker({
              position: new google.maps.LatLng(42.9814362, -81.2267205)
    });

    marker1.setMap(map1); 

    var marker2 = new google.maps.Marker({
              position: new google.maps.LatLng(42.9421287, -81.2284421)
    });

    marker2.setMap(map2); 

  }
1
scaisEdge 3 nov. 2017 a las 19:41

Para referencia futura, lo descubrí.

  function myMap() {
  var mapOptions1 = {
    center: new google.maps.LatLng(42.9814362, -81.2267205),
    zoom:15,
    mapTypeId: google.maps.MapTypeId.ROADMAP

};
  var mapOptions2 = {
    center: new google.maps.LatLng(42.9421287, -81.2284421),
    zoom:15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map1 = new google.maps.Map(document.getElementById("googleMap1"),mapOptions1);
  var latlong = {lat: , lng: }; // Insert your map marker lat/long here
  var marker = new google.maps.Marker({
    position: latlong,
    map: map1,
    title: 'Hello World'
  });
  var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapOptions2);
  var latlong = {lat: , lng: }; // Insert your map marker lat/long here
  var marker = new google.maps.Marker({
    position: latlong,
    map: map2,
    title: 'Hello World'
  });
}
0
rc car 3 nov. 2017 a las 19:35