Javascript 基于用户选择的下拉字段的多个不同Google标记

Javascript 基于用户选择的下拉字段的多个不同Google标记,javascript,jquery,google-maps,Javascript,Jquery,Google Maps,我能够根据显示信息框的用户输入创建多个标记,我当前的问题是如何根据用户的选定值放置不同的多个标记,例如,用户选择的学校,标记将显示学校图标,而其他用户选择的教堂将显示教堂图标。谢谢 (function ($) { $.noConflict(); /* * render_map * * This function will render a Google Map onto the selected jQuery element *

我能够根据显示信息框的用户输入创建多个标记,我当前的问题是如何根据用户的选定值放置不同的多个标记,例如,用户选择的学校,标记将显示学校图标,而其他用户选择的教堂将显示教堂图标。谢谢

(function ($) {
    $.noConflict();
    /*
     *  render_map
     *
     *  This function will render a Google Map onto the selected jQuery element
     *
     *  @type   function
     *  @date   8/11/2013
     *  @since  4.3.0
     *
     *  @param  $el (jQuery element)
     *  @return n/a
     */
    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
        };
        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);

    }

    /*
     *  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 icons = IconURL + iconIMG;
        var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
        var image = new google.maps.MarkerImage('icons');

        // create marker
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: icons
        });

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

        // if marker contains HTML, add it to an infoWindow
        if ($marker.html()) {
            // create info window
            var infowindow = new google.maps.InfoWindow({
                content: $marker.html()
            });

            // show info window when marker is clicked
            google.maps.event.addListener(marker, 'mouseover', function () {
                infowindow.open(map, marker);
            });
            google.maps.event.addListener(marker, 'mouseout', function () {
                infowindow.close(map, marker);
            });
        }
    }

    /*
     *  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 () {
        $('.acf-map').each(function () {
            render_map($(this));
        });
    });
})(jQuery);

创建标记时,为标记提供ID

var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: icons,
        id:"school"  //or church to your respective markers
    });
function hide_markers(){
  for(var i = 0; i<markers.length; i++){
    if(markers[i].id !=  "school")
    {
      markers[i].setVisible(false); //hide the markers whose id is not school
    }
  }
}
显示提取标记时

var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: icons,
        id:"school"  //or church to your respective markers
    });
function hide_markers(){
  for(var i = 0; i<markers.length; i++){
    if(markers[i].id !=  "school")
    {
      markers[i].setVisible(false); //hide the markers whose id is not school
    }
  }
}
函数隐藏标记(){

对于(var i=0;i能否请您更具体一点,我不想隐藏任何标记您想选择specefic标记或动态更改其图标?基本上,我有一个用户可以选择位置的表单,提交表单后会发生什么?在谷歌地图中显示它。我想根据用户选择的图标更改图标p花边,当前它仅显示最后一个图标变量