设置谷歌地图标记JavaScript

时间:2015-07-23 02:15:32

标签: javascript google-maps google-maps-markers

我将自定义谷歌地图嵌入我的主页(联系人) - 但是如何在地图上设置标记并将地图映射到正确的位置?

除了html之外:

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

和js代码是:

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

1 个答案:

答案 0 :(得分:1)

在初始化函数中,您需要添加var marker变量。下面是单击时在地图上设置标记的简单示例。希望这个帮助

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

相关问题