Googleマップマーカーを追加するには？

Question

このコードでは、Googleマップマーカーを追加する必要があります。マップマーカーを追加する方法は分かりませんでした。誰かが私を案内してくれたら分かります。

// 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

でマーカーを追加することができます。

google.maps.Markerコンストラクタはマーカーの初期プロパティを指定して、単一のマーカーオプションオブジェクトリテラルを取ります。

次のフィールドは特に重要であり、マーカーを構築する際に一般的に設定さ：

• position（必須）マーカーの初期位置を特定する緯度経度を指定します。

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

Answer 2

私はあなたが読みやすさのために、関数の外であなたの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 
} 

そして、あなたはただ、グーグルのJavaScript APIのMarkersでのガイドに従ってください

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