2017-10-03 1 views
-3

マーカをマップに追加すると、ウェイポイントを表示するときにマップに2番目のマーカをドロップすると、カスタムマーカのコードが表示されます。私は何をすべきか ? 私はこのポストのカスタムマーカーを使用:ここenter link description here2つのマーカの間にウェイポイントを表示

<script> 
 
     var map; 
 
     function initAutocomplete() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      center: {lat: 28.969820, lng: 50.842526}, 
 
      zoom: 15, 
 
      disableDefaultUI: true, 
 
     });var currentId = 0; 
 
     </script>

+0

あなたの投稿コードにはマーカーが存在しない、またどのような方法のポイントがありますか? – geocodezip

答えて

0

を私の全体のコードです:

<script> 
 
     var map; 
 
     function initAutocomplete() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      center: {lat: 28.969820, lng: 50.842526}, 
 
      zoom: 15, 
 
      disableDefaultUI: true, 
 
     });var currentId = 0; 
 
      
 
     function initialize() { 
 

 

 

 

 

 

 

 

 

 

 

 
// Create the search box and link it to the UI element. 
 
     var input = document.getElementById('pac-input'); 
 
     var searchBox = new google.maps.places.SearchBox(input); 
 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
 

 
     // Bias the SearchBox results towards current map's viewport. 
 
     map.addListener('bounds_changed', function() { 
 
      searchBox.setBounds(map.getBounds()); 
 
     }); 
 

 
     var markers = []; 
 
     // Listen for the event fired when the user selects a prediction and retrieve 
 
     // more details for that place. 
 
     searchBox.addListener('places_changed', function() { 
 
      var places = searchBox.getPlaces(); 
 

 
      if (places.length == 0) { 
 
      return; 
 
      } 
 

 
      // Clear out the old markers. 
 
      markers.forEach(function(marker) { 
 
      marker.setMap(null); 
 
      }); 
 
      markers = []; 
 

 
      // For each place, get the icon, name and location. 
 
      var bounds = new google.maps.LatLngBounds(); 
 
      places.forEach(function(place) { 
 
      if (!place.geometry) { 
 
       console.log("Returned place contains no geometry"); 
 
       return; 
 
      } 
 
      var icon = { 
 
       url: place.icon, 
 
       size: new google.maps.Size(71, 71), 
 
       origin: new google.maps.Point(0, 0), 
 
       anchor: new google.maps.Point(17, 34), 
 
       scaledSize: new google.maps.Size(25, 25) 
 
      }; 
 

 
      // Create a marker for each place. 
 
      markers.push(new google.maps.Marker({ 
 
       map: map, 
 
       icon: icon, 
 
       title: place.name, 
 
       position: place.geometry.location 
 
      })); 
 

 
      if (place.geometry.viewport) { 
 
       // Only geocodes have viewport. 
 
       bounds.union(place.geometry.viewport); 
 
      } else { 
 
       bounds.extend(place.geometry.location); 
 
      } 
 
      }); 
 
      map.fitBounds(bounds); 
 
     }); 
 

 

 
var input = document.getElementById('pac-input'); 
 
var autocomplete = new google.maps.places.Autocomplete(input); 
 
} 
 
      
 
google.maps.event.addDomListener(window, 'load', initialize); 
 
var myOptions = { 
 
    zoom: 15, 
 
    disableDefaultUI: true, 
 
    center: new google.maps.LatLng(28.969820, 50.842526), 
 
    mapTypeId: 'roadmap' 
 
}; 
 
      
 
map = new google.maps.Map($('#map')[0], myOptions); 
 

 
/** 
 
* Global marker object that holds all markers. 
 
* @type {Object.<string, google.maps.LatLng>} 
 
*/ 
 
var markers = {}; 
 

 
/** 
 
* Concatenates given lat and lng with an underscore and returns it. 
 
* This id will be used as a key of marker to cache the marker in markers object. 
 
* @param {!number} lat Latitude. 
 
* @param {!number} lng Longitude. 
 
* @return {string} Concatenated marker id. 
 
*/ 
 
var getMarkerUniqueId= function(lat, lng) { 
 
    return lat + '_' + lng; 
 
} 
 

 
/** 
 
* Creates an instance of google.maps.LatLng by given lat and lng values and returns it. 
 
* This function can be useful for getting new coordinates quickly. 
 
* @param {!number} lat Latitude. 
 
* @param {!number} lng Longitude. 
 
* @return {google.maps.LatLng} An instance of google.maps.LatLng object 
 
*/ 
 
var getLatLng = function(lat, lng) { 
 
    return new google.maps.LatLng(lat, lng); 
 
}; 
 

 
/** 
 
* Binds click event to given map and invokes a callback that appends a new marker to clicked location. 
 
*/ 
 
var addMarker = google.maps.event.addListener(map, 'click', function(e) { 
 
    var lat = e.latLng.lat(); // lat of clicked point 
 
    var lng = e.latLng.lng(); // lng of clicked point 
 
    var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object. 
 
    var marker = new google.maps.Marker({ 
 
     position: getLatLng(lat, lng), 
 
     map: map, 
 
     animation: google.maps.Animation.DROP, 
 
     id: 'marker_' + markerId 
 
    }); 
 
    markers[markerId] = marker; // cache marker in markers object 
 
    bindMarkerEvents(marker); // bind right click event to marker 
 
}); 
 

 
/** 
 
* Binds right click event to given marker and invokes a callback function that will remove the marker from map. 
 
* @param {!google.maps.Marker} marker A google.maps.Marker instance that the handler will binded. 
 
*/ 
 
var bindMarkerEvents = function(marker) { 
 
    google.maps.event.addListener(marker, "rightclick", function (point) { 
 
     var markerId = getMarkerUniqueId(point.latLng.lat(), point.latLng.lng()); // get marker id by using clicked point's coordinate 
 
     var marker = markers[markerId]; // find marker 
 
     removeMarker(marker, markerId); // remove it 
 
    }); 
 
}; 
 

 
/** 
 
* Removes given marker from map. 
 
* @param {!google.maps.Marker} marker A google.maps.Marker instance that will be removed. 
 
* @param {!string} markerId Id of marker. 
 
*/ 
 
var removeMarker = function(marker, markerId) { 
 
    marker.setMap(null); // set markers setMap to null to remove it from map 
 
    delete markers[markerId]; // delete marker instance from markers object 
 
}; 
 

 
      
 
     } 
 
     
 
    </script>

関連する問題