如何添加谷歌地圖標記？

Question

在此代碼中，我需要添加谷歌地圖標記。 我嘗試了很多，但不知道如何添加地圖標記。 如果有人知道，請指導我。

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

  function initMap() {
    var origin_place_id = null;
    var destination_place_id = null;
    var travel_mode = google.maps.TravelMode.WALKING;
    var map = new google.maps.Map(document.getElementById('map'), {
      mapTypeControl: false,
      center: {lat: 30.3753, lng: 69.3451},
      zoom: 7
    });
    google.maps.event.addDomListener(document.getElementById('go'), 'click',route);
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var marker=new google.maps.Marker({
        position:map,
    });
    directionsDisplay.setMap(map);
    marker.setMap(map);

    var origin_input = document.getElementById('origin-input');
    var destination_input = document.getElementById('destination-input');
    var modes = document.getElementById('mode-selector');


    //map.controls[google.maps.ControlPosition.TOP_LEFT].push(origin_input);
    //map.controls[google.maps.ControlPosition.TOP_LEFT].push(destination_input);
    //map.controls[google.maps.ControlPosition.TOP_LEFT].push(go);
    //map.controls[google.maps.ControlPosition.TOP_LEFT].push(modes);

    var origin_autocomplete = new google.maps.places.Autocomplete(origin_input);
    origin_autocomplete.bindTo('bounds', map);
    var destination_autocomplete =
        new google.maps.places.Autocomplete(destination_input);
    destination_autocomplete.bindTo('bounds', map);

    // Sets a listener on a radio button to change the filter type on Places
    // Autocomplete.
    function setupClickListener(id, mode) {
      var radioButton = document.getElementById(id);
      radioButton.addEventListener('click', function() {
        travel_mode = mode;
      });
    }
    setupClickListener('changemode-walking', google.maps.TravelMode.WALKING);
    setupClickListener('changemode-transit', google.maps.TravelMode.TRANSIT);
    setupClickListener('changemode-driving', google.maps.TravelMode.DRIVING);


    function expandViewportToFitPlace(map, place) {
        if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);
      }
    }

    origin_autocomplete.addListener('place_changed', function() {
      var place = origin_autocomplete.getPlace();
      if (!place.geometry) {
        window.alert("Autocomplete's returned place contains no geometry");
        return;
      }
      expandViewportToFitPlace(map, place);

      // If the place has a geometry, store its place ID and route if we have
      // the other place ID
      origin_place_id = place.place_id;
      route(origin_place_id, destination_place_id, travel_mode,
            directionsService, directionsDisplay);
    });

    destination_autocomplete.addListener('place_changed', function() {
      var place = destination_autocomplete.getPlace();
      if (!place.geometry) {
        window.alert("Autocomplete's returned place contains no geometry");
        return;
      }

      expandViewportToFitPlace(map, place);
    $('#go').click(function(){
        var origin_input = document.getElementById('origin-input').value;
        var res = origin_input.split(",");
        var bc = res[0];
        var destination_input = document.getElementById('destination-input').value;
        var res = destination_input.split(",");
        var bd = res[0];
        //alert(bc);
        //alert(bd);
        //sessionStorage.setItem ("fromCity" , bc[0]);
        //sessionStorage.setItem ("toCity" , bd[0]);
      // If the place has a geometry, store its place ID and route if we have
      // the other place ID
        destination_place_id = place.place_id;
        route(origin_place_id, destination_place_id, travel_mode,
            directionsService, directionsDisplay);
        });
    });
    $('#mode-selector').hide();
    $('#go').click(function(){
        //$('#go').hide(250);
        $('#mode-selector').show(250);
    });


    function route(origin_place_id, destination_place_id, travel_mode,
                   directionsService, directionsDisplay) {
      if (!origin_place_id || !destination_place_id) {
        return;
      }
      directionsService.route({
        origin: {'placeId': origin_place_id},
        destination: {'placeId': destination_place_id},
        travelMode: travel_mode
      }, 
    function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
      google.maps.event.addDomListener(window, 'load', initialize);
    }
  }

Answer 1

我建議您將map變量放在函數之外，以提高可讀性。

var map;

function initMap() {
    var origin_place_id = null;
    var destination_place_id = null;
    var travel_mode = google.maps.TravelMode.WALKING;
    map = new google.maps.Map(document.getElementById('map'), {
        mapTypeControl: false,
        center: {
            lat: 30.3753,
            lng: 69.3451
        },
        zoom: 7
    });
    ..... rest of your code
}

您可以通過添加標記

function addMarker(lat, lng, title) {
  return new google.maps.Marker({
    position: {lat: lat, lng: lng};
    map: map,
    title: title
  });
}

var marker = addMarker(-50, 50, 'My Marker!!');

Answer 2

只需按照Google JavaScript API 標記中的指南進行操作即可。

此處說明google.maps.Marker構造函數采用單個Marker選項對象文字，用於指定標記的初始屬性。

構造標記時，以下字段特別重要且通常設置：

• position （必填）指定一個LatLng，用於標識標記的初始位置。

• map （可選）指定放置標記的Map 。 如果未在標記的構造上指定地圖，則會創建標記，但不會將其附加到（或顯示在）地圖上。 您可以稍后通過調用標記的setMap()方法來添加標記。

檢查上面的鏈接以查看有關如何添加標記的示例代碼。

另外，這是我對您鏈接的示例代碼所做的示例代碼。

function initMap() {
var myLatLng = {lat: 30.3753, lng: 69.3451};
var origin_place_id = null;
var destination_place_id = null;
var travel_mode = google.maps.TravelMode.WALKING;
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeControl: false,
zoom: 13,
center: myLatLng
});

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});

var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
directionsDisplay.setMap(map);