Jak wyświetlać elementy na mapie Google podobnie jak sposób, w jaki Google pokazuje swoje wyniki

Potrzebuję pokazać mapę z wieloma znacznikami, Ive found this question, która ma to, czego szukam, ale problem polega na tym, że muszę pokazać znacznik każdego z nich element obok niego.Jak wyświetlać elementy na mapie Google podobnie jak sposób, w jaki Google pokazuje swoje wyniki

<c:forEach var="product" items="products"> 
    ${product.name} 
</c:forEach>

Sprawdziłem również odpowiedź this question, ale niewiele mi pomogło.

Kod Google Map

var pinColor = "FE7569"; 
var marker, i; 

var address=[]; 
address[0] = "New york"; 
address[1] = "las vegas"; 
address[2] = "san francisco"; 
address[3] = "chicago"; 

// Set default map center location 
var latlng = new google.maps.LatLng(latcenter,longcenter); 

// Create pinShadow for each marker 
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com  /chart?chst=d_map_pin_shadow", 
    new google.maps.Size(40, 37), 
    new google.maps.Point(0, 0), 
    new google.maps.Point(12, 35)); 

// Function to create the dynamic marker 
function pinImage(i){ 
    return image = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/"+i+"/"+pinColor+"/", new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34)); 
} 

// Function to run once page has loaded 
    function initialize(){  
    var geocoder=new google.maps.Geocoder(); 
// Set Default settigns for google map 
var settings = { 
    zoom: 3, 
    center: latlng, 
    mapTypeControl: true, 
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
    navigationControl: true, 
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, 
    mapTypeId: google.maps.MapTypeId.ROADMAP}; 

// Start Google Maps and assign it to div on site 
var map = new google.maps.Map(document.getElementById("map_canvas"), settings); 
// loop though total numner of address in array 
for (var i = 0; i < address.length; i++) { 
    (function(i) { 

    // Use geocoder to grab latlong for user inputed address 
    geocoder.geocode({ 'address': address[i]}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      // Redefine map center location 
      if (i == 1){ map.setCenter(results[0].geometry.location); } 

      // Create dynamic markers on map as per the address array 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location, 
       title:address[i], 
       zIndex: i, 
       // PROBLEM CODE --- Using the function below it creates all Markers with a "1" instead of the "i" value..?? 
       icon: pinImage(i), 
       shadow: pinShadow 
      });   
     } 
     }); 
    })(i); 
    } 
    } 
google.maps.event.addDomListener(window, 'load', initialize)

wyjście Pożądane jest podobny do następującego obraz, każdy wynik ma o nazwie znacznika i jego lokalizacja jest pokazany przez związanego z nim znacznik na mapie. Potrzebuję markerów, aby być alfabetycznymi, nie numerowanymi, również na podstawie współrzędnych, a nie adresów.

enter image description here

Źródło

2015-05-01 Daniel Newtown

Która część nie działa? Część JSP lub Javascript? – Jeroen

@Jeroen Nie wiem, jak dodać znacznik obok nazwy każdego produktu –

EDIT: Zmieniono fragment uzyskać obraz znacznika z chart.apis.google.com. (Nie jestem pewien, dlaczego googlemapsmarkers.com przestał działać).

Możesz pobrać adres URL ze znacznika i wyświetlić go jako obraz. Oto fragment kodu do zilustrowania:

<!DOCTYPE html> 
 

 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script> 
 
    <style> 
 
    #map-canvas, 
 
    #marker-container { 
 
     width: 50%; 
 
     height: 600px; 
 
     margin: 0px; 
 
     padding: 0px; 
 
     float: left; 
 
    } 
 
    .marker-description { 
 
     padding-left: 40px; 
 
    } 
 
    .place { 
 
     padding-left: 10px; 
 
    } 
 
    .marker { 
 
     display: inline-block; 
 
     width: 21px; 
 
     height: 35px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="map-canvas"></div> 
 
    <div id="marker-container"></div> 
 
    <script> 
 
    var map; 
 
    var markers = []; 
 
    var pinColor = "FE7569"; 
 

 
    // Function to create the dynamic marker 
 
    function pinImage(imagenum) { 
 
     // should check for more than 32 pins... 
 
     var ch = 'A' 
 
     var makerLetter = String.fromCharCode(ch.charCodeAt(0) + imagenum); 
 
     return image = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + makerLetter + "|" + pinColor); 
 
    } 
 

 
    function initialize() { 
 

 
     var newYork = new google.maps.LatLng(40.7773514, -73.9554338); 
 
     var mapOptions = { 
 
     zoom: 13, 
 
     center: newYork, 
 
     disableDefaultUI: true, 
 
     mapTypeControlOptions: google.maps.MapTypeId.ROADMAP 
 
     }; 
 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
     var request = { 
 
     location: newYork, 
 
     radius: 5000, 
 
     types: ['store'] 
 
     }; 
 
     var service = new google.maps.places.PlacesService(map); 
 
     service.nearbySearch(request, callback); 
 
    } 
 

 
    function callback(results, status) { 
 
     if (status == google.maps.places.PlacesServiceStatus.OK) { 
 
     for (var i = 0, marker; marker = markers[i]; i++) { 
 
      marker.setMap(null); 
 
     } 
 
     markers = []; 
 
     $("#marker-container").empty(); 
 
     for (i = 0; i < results.length; i++) { 
 
      var place = results[i]; 
 
      var placeLoc = place.geometry.location; 
 
      // Create a marker for each place. 
 
      var marker = new google.maps.Marker({ 
 
      map: map, 
 
      title: place.name, 
 
      position: place.geometry.location, 
 
      icon: pinImage(i) 
 
      }); 
 

 
      markers.push(marker); 
 
      var description = $("<div class='marker-description'><image class='marker' src='" + marker.icon.url + "'></image><span class='place'>" + place.name + "</span>"); 
 
      $("#marker-container").append(description); 
 
     } 
 
     } 
 
    } 
 

 
    google.maps.event.addDomListener(window, 'load', initialize); 
 
    </script> 
 
</body> 
 

 
</html>

Źródło

2015-05-06 10:57:37 brenzy

Znacznik ładniejszy na https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-b.png&text=A&psize = 16 & font = fonts/Roboto-Regular.ttf i color = ff333333 i ax = 44 & ay = 48 & scale = 1 – Arie

Brzmi jak chcesz liter zamiast numerów wewnątrz PIN:

// Function to create the dynamic marker 
function pinImage(i) { 
    var letter = String.fromCharCode(i + 65); // 'A' is 65. 
    return new google.maps.MarkerImage(
     "http://www.googlemapsmarkers.com/v1/" + letter + "/" + pinColor + "/", 
     new google.maps.Size(21, 34), 
     new google.maps.Point(0,0), 
     new google.maps.Point(10, 34)); 
}

Również trzeba tworzyć obiekty, które utrzymują śledzenie adresu, latlng i indeksu każdego ze swoich znaczników. Proponuję użyć do tego celu map.data. https://developers.google.com/maps/documentation/javascript/reference#Data

var addresses = ['New York', 'San Francisco']; 
addresses.forEach(function(address, i) { 
    // Create a feature. 
    var feature = map.data.add({ 
     'id': i, 
     'properties': {'address': address} 
    }); 

    // Display the feature in the list. 
    $('.address-list').append($('<div>') 
     .append($('<img>').attr('src', pinImage(i))) 
     .append($('<div>').text(address))); 
    // Do more fancy things here 

    // Geocode the feature and position it on the map. 
    geocoder.geocode({'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      feature.setGeometry(results[0].geometry.location); 
      if (i == 0) { 
       map.setCenter(results[0].geometry.location); 
      } 
     } 
    }); 
});

Następnie można sterować wyświetlaniem znaczników tak:

map.data.setStyle(function(feature) { 
    return { 
     title: feature.getProperty('address'), 
     zIndex: feature.getId(), 
     icon: pinImage(feature.getId()), 
     shadow: pinShadow 
    }; 
});

Źródło

2015-05-08 00:04:55

Jak wyświetlać elementy na mapie Google podobnie jak sposób, w jaki Google pokazuje swoje wyniki

Odpowiedz

Powiązane problemy