How to show items on google map similar to the way google shows its results

前端未结

关注

 2  899

I need to show a map with multiple markers, Ive found this question which has what I am looking for but the problem is I need to show the marker of each item next to it.

相关标签:

2条回答

清歌不尽

2021-02-19 08:12

EDIT: Changed the snippet to get the marker image from chart.apis.google.com. (I'm not sure why googlemapsmarkers.com stopped working).

You can get the url from the marker, and display it as an image. Here is a code snippet to illustrate:

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

0 讨论(0)

傲寒

2021-02-19 08:27

It sounds like you want letters instead of numbers inside your 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));
}

Also, you need to create objects that keep track of the address, latlng, and index of each of your markers. I suggest you use map.data to do this. 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);
            }
        }
    });
});

Then you can control the display of the markers like this:

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

0 讨论(0)