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

What is "the right place"? There is no Marker in your existing code. — geocodezip
– geocodezip, Commented Jul 23, 2015 at 2:18

Neo · Accepted Answer · 2015-07-23 02:33:49Z

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

Collectives™ on Stack Overflow

setting google maps marker javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related