Google Maps Add New Marker And Pop Up Title

Sorry if this is a real rookie question but I can never get my head around Google Maps API. Below is my JS code for my google map. I just want to simply add another marker and mak

Solution 1:

1. add an infowindow

infowindow = new google.maps.InfoWindow(),

2. add a "click" listener to the marker to open it:

google.maps.event.addListener(marker,'click',function(e) {
    infowindow.setContent(marker.getTitle());
    infowindow.open(map,marker);
});

3. add a second marker and click listener for it:

    marker2 =  new google.maps.Marker({
    position: myLatlng2,
    map: map,
    icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
    title: "Come visit us here also"
})
google.maps.event.addListener(marker2,'click',function(e) {
    infowindow.setContent(marker2.getTitle());
    infowindow.open(map,marker2);
});

proof of concept fiddle

code snippet:

// Init Google MapsfunctioninitGoogleMaps() {
  // Init on contact pageif ($('#contact-map').length > 0) {
    var myLatlng = new google.maps.LatLng(50.373667, -4.138203),
      myLatlng2 = new google.maps.LatLng(50.37, -4.2)
    mapOptions = {
        center: myLatlng,
        zoom: 10,
        icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
        mapTypeId: google.maps.MapTypeId.MAP,
        scrollwheel: false// disableDefaultUI: true
      },

      map = new google.maps.Map(document.getElementById("contact-map"), mapOptions),
      infowindow = new google.maps.InfoWindow(),
      marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
        title: "Come visit us"
      }),
      marker2 = new google.maps.Marker({
        position: myLatlng2,
        map: map,
        icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
        title: "Come visit us here also"
      })
    google.maps.event.addListener(marker, 'click', function(e) {
      infowindow.setContent(marker.getTitle());
      infowindow.open(map, marker);
    });
    google.maps.event.addListener(marker2, 'click', function(e) {
      infowindow.setContent(marker2.getTitle());
      infowindow.open(map, marker2);
    });

  }
}
initGoogleMaps();

html,
body,
#contact-map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maps.googleapis.com/maps/api/js"></script><divid="contact-map"style="border: 2px solid #3872ac;"></div>

Solution 2:

try this:

functioninitMap() {
    var uluru = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
 });

 var contentString = 'html string';

 var infowindow = new google.maps.InfoWindow({
   content: contentString
 });

 var marker = new google.maps.Marker({
   position: uluru,
   map: map,
   title: 'Uluru (Ayers Rock)'
 });
 marker.addListener('click', function() {
   infowindow.open(map, marker);
 });
}