基于数据标记值的 Google Map API 自定义标记

Question

我有一个在谷歌地图上输出许多标记的工作脚本。我不知道如何根据 div data-marker 属性更改自定义标记图像。我无法将我在其他地方看到的内容与我已有的脚本合并。脚本来自Advanced Custom Fields Google Map documentation。

基本上，我如何告诉 Google 寻找自定义标记图标的数据标记属性，而不是像现在这样在脚本中硬编码它？

感谢任何输入。

<div class="marker" data-lat="<?php echo $loc_address_lat; ?>" data-lng="<?php echo $loc_address_lng; ?>" data-marker="<?php echo $map_marker_color; ?>">

<script type="text/javascript">
(function($) { 
function render_map( $el ) {

// var
var $markers = $el.find('.marker');

// vars
var args = {
    zoom        : 16,
    center      : new google.maps.LatLng(0, 0),
    mapTypeId   : google.maps.MapTypeId.ROADMAP,
    //mapTypeId : google.maps.MapTypeId.HYBRID
};

// create map               
var map = new google.maps.Map( $el[0], args);

// add a markers reference
map.markers = [];

// add markers
$markers.each(function(){

    add_marker( $(this), map );

});

// center map
center_map( map );

}

// create info window outside of each - then tell that singular infowindow to swap     content based on click
var infowindow = new google.maps.InfoWindow({
content     : '' 
});

/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $marker (jQuery element)
*  @param   map (Google Map object)
*  @return  n/a
*/

function add_marker( $marker, map ) {

// var icon (comment out next line and "icon : image" to disable)
var image = '/images/custom-pin-light-blue.png';

// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng')         );

// create marker
var marker = new google.maps.Marker({
    position : latlng,
    map : map,
    icon : image // Custom image (comment out to disable)
});

// add to array
map.markers.push( marker );

// if marker contains HTML, add it to an infoWindow
if( $marker.html() ) {  

    // show info window when marker is clicked & close other markers
    google.maps.event.addListener(marker, 'click', function() {
        //swap content of that singular infowindow
        infowindow.setContent($marker.html());
        infowindow.open(map, marker);
    });

    // close info window when map is clicked
    google.maps.event.addListener(map, 'click', function(event) {
        if (infowindow) {
            infowindow.close(); }
        });
    }

}

/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   map (Google Map object)
*  @return  n/a
*/

function center_map( map ) {

// vars
var bounds = new google.maps.LatLngBounds();

// loop through all markers and create bounds
$.each( map.markers, function( i, marker ){

    var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

    bounds.extend( latlng );

});

// only 1 marker?
if( map.markers.length == 1 )
{
    // set center of map
    map.setCenter( bounds.getCenter() );
    map.setZoom( 16 );
}
else
{
    // fit to bounds
    map.fitBounds( bounds );
}

}

/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type    function
*  @date    8/11/2013
*  @since   5.0.0
*
*  @param   n/a
*  @return  n/a
*/

$(document).ready(function(){

$('.large-acf-map').each(function(){

    render_map( $(this) );

});

});

})(jQuery);
</script>

Answer 1

最简单的方法是将自定义标记的完整 URL 放入该属性中：

<div class="marker" data-lat="-25.363" data-lng="131.044" 
   data-marker="http://maps.google.com/mapfiles/ms/micons/green.png"></div>
<div class="marker" data-lat="-25.393" data-lng="131.044" 
   data-marker="http://maps.google.com/mapfiles/ms/micons/blue.png"></div>

然后将其用于标记中的图标：

    // create marker
    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      icon: $marker.attr('data-marker')
    });

proof of concept fiddle

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

.large-acf-map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="large-acf-map">
  <div class="marker" data-lat="-25.363" data-lng="131.044" data-marker="http://maps.google.com/mapfiles/ms/micons/green.png"></div>
  <div class="marker" data-lat="-25.393" data-lng="131.044" data-marker="http://maps.google.com/mapfiles/ms/micons/blue.png"></div>

</div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
<script type="text/javascript">
  (function($) {
    function render_map($el) {

      // var
      var $markers = $el.find('.marker');

      // vars
      var args = {
        zoom: 16,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        //mapTypeId : google.maps.MapTypeId.HYBRID
      };

      // create map               
      var map = new google.maps.Map($el[0], args);

      // add a markers reference
      map.markers = [];

      // add markers
      $markers.each(function() {

        add_marker($(this), map);

      });

      // center map
      center_map(map);

    }

    // create info window outside of each - then tell that singular infowindow to swap     content based on click
    var infowindow = new google.maps.InfoWindow({
      content: ''
    });

    /*
     *  add_marker
     *
     *  This function will add a marker to the selected Google Map
     *
     *  @type    function
     *  @date    8/11/2013
     *  @since   4.3.0
     *
     *  @param   $marker (jQuery element)
     *  @param   map (Google Map object)
     *  @return  n/a
     */

    function add_marker($marker, map) {
      // var
      var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));

      // create marker
      var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: $marker.attr('data-marker')
      });

      // add to array
      map.markers.push(marker);

      // if marker contains HTML, add it to an infoWindow
      if ($marker.html()) {

        // show info window when marker is clicked & close other markers
        google.maps.event.addListener(marker, 'click', function() {
          //swap content of that singular infowindow
          infowindow.setContent($marker.html());
          infowindow.open(map, marker);
        });

        // close info window when map is clicked
        google.maps.event.addListener(map, 'click', function(event) {
          if (infowindow) {
            infowindow.close();
          }
        });
      }

    }

    /*
     *  center_map
     *
     *  This function will center the map, showing all markers attached to this map
     *
     *  @type    function
     *  @date    8/11/2013
     *  @since   4.3.0
     *
     *  @param   map (Google Map object)
     *  @return  n/a
     */

    function center_map(map) {

      // vars
      var bounds = new google.maps.LatLngBounds();

      // loop through all markers and create bounds
      $.each(map.markers, function(i, marker) {

        var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());

        bounds.extend(latlng);

      });

      // only 1 marker?
      if (map.markers.length == 1) {
        // set center of map
        map.setCenter(bounds.getCenter());
        map.setZoom(16);
      } else {
        // fit to bounds
        map.fitBounds(bounds);
      }

    }

    /*
     *  document ready
     *
     *  This function will render each map when the document is ready (page has loaded)
     *
     *  @type    function
     *  @date    8/11/2013
     *  @since   5.0.0
     *
     *  @param   n/a
     *  @return  n/a
     */

    $(document).ready(function() {

      $('.large-acf-map').each(function() {

        render_map($(this));

      });

    });

  })(jQuery);
</script>