setting google maps marker javascript

Question

I embed custom google map to my homepage (under contact) - but how to set the marker on the map and map itself on the right place?

addition to html was:

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="map.js"></script>

and js code is:

function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
          center: new google.maps.LatLng(44.5403, -78.5463),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

In initialize function you need add var marker variable. Below is simple example to set marker on map when click. Hope this help

function initializeMap() {
    var options = {
        center: new google.maps.LatLng(21.1569, 106.113),
        zoom: 15
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), options);
    
    directionsDisplay = new google.maps.DirectionsRenderer();
    infoWindow = new google.maps.InfoWindow();
    marker = new google.maps.Marker();
    
    
    directionsDisplay.setMap(map);
}

google.maps.event.addListener(map, 'click', function(event) { 
            placeMarker(event.latLng);
        });

function placeMarker(location) {
    
    geocoder.geocode({latLng : location}, function(response, status){
        if (status == google.maps.GeocoderStatus.OK) {
            console.log(response);
            if (response[0]) {
                marker.setMap(map);
                marker.setPosition(location);

                infoWindow.setContent(response[0].formatted_address);
                infoWindow.open(map, marker);
            }
        }
    });
}