CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
rc car
rc car

Reputation: 25

How to add 2 google maps with a marker on each Lat/Long point?

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 in question:

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

What I think I have to add, but not sure where, or even how:

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

marker.setMap(map);

Upvotes: 0

Views: 68

Answers (2)

ScaisEdge
ScaisEdge

Reputation: 133380

You should assign a valid center for each marker on each map 

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

  }

Upvotes: 1

rc car
rc car

Reputation: 25

For future reference, I figured it out.

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

Upvotes: 0

Related Questions