设置谷歌地图标记JavaScript [英] setting google maps marker javascript

问题描述

我将自定义Google地图嵌入我的主页（在联系人下） - 但是如何在地图上设置标记并将其映射到正确的位置？

除了HTML为：

 < script src =https://maps.googleapis.com/maps/api/js> ;< /脚本> 
< 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）; 
  

解决方案

在初始化函数中，需要添加 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：位置}，函数（响应，状态）{if（status == google.maps.GeocoderStatus.OK）{console.log（response）; if（response [0]）{marker.setMap（map）; marker.setPosition位置）; infoWindow.setContent（response [0] .formatted_address）; infoWindow.open（map，marker）;}}}）;}

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

解决方案

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

这篇关于设置谷歌地图标记JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！