2017-10-03 3 views
-3

je veux quand ajouter un marqueur à la carte puis me montrer waypoint quand j'ai déposé deuxième marqueur sur la carte voici mon code pour mon marqueur personnalisé, j'ai essayé les développeurs google mais cela n'a pas fonctionné pour moi. que devrais-je faire ? i utilisé ce marqueur message personnalisé: enter link description heremontrer waypoint entre deux marqueur

<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

Il n'y a pas de marqueurs dans votre code affiché, ni y a-t-il des points de passage – geocodezip

Répondre

0

voici mon code entier:

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