0

i have the following code to show school and mosque near to some location.

<script src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>

<script>
      var map;
      var infowindow;

      function initialize() {
        var pyrmont = new google.maps.LatLng(<?php echo $lat;?>, <?php echo $lng;?>);

        map = new google.maps.Map(document.getElementById('map1'), {
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: pyrmont,
          zoom: 15
        });

        var request = {
          location: pyrmont,
          radius: 500,
          types: ['school' , 'mosque']
        };
        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.search(request, callback);
      }

      function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
          }
        }
      }
      base_Icon = "<?php echo JURI::base();?>components/com_properties/includes/img/school.png";        
        shadow_Icon = "<?php echo JURI::base();?>components/com_properties/includes/img/house-shadow.png";

      function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location,
        shadow: shadow_Icon,
        icon: base_Icon 
        });

        google.maps.event.addListener(marker, 'mouseover', function() {
          infowindow.setContent(place.name);
          infowindow.open(map, this);
        });
      }

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

<div id="map1" style=" width:<?php echo $params->get('WidthMap','100%');?>; height:<?php echo $params->get('HeightMap','300px');?>;margin:0px;padding:0px;"></div>

Right now its showing schools and mosques nearest to location and adding marker of image to all locations (for all schools and mosques). what i want to do is to show separate marker for each location type. one png image for shools and 2nd png image for mosques.

what may be the best way to do this? i have no clue may be i need to create two different functions for each marker to show.

Thanks in advance.

4

1 回答 1

1

In your createMarker function, you can refer to place.types - an array of types. NB: some of the places will be of more than one type. You should check to see if that array contains either 'school' or 'mosque', and set the icon to use for that marker as appropriate.

    base_Icon_school = "<?php echo JURI::base();?>components/com_properties/includes/img/school.png";        
    base_Icon_mosque = "<?php echo JURI::base();?>components/com_properties/includes/img/mosque.png";  
    shadow_Icon = "<?php echo JURI::base();?>components/com_properties/includes/img/house-shadow.png";

  function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker;
    var icon_to_use;

    if (place.types.indexOf('school') != -1) {
           icon_to_use =  base_Icon_school;
    } else if (place.types.indexOf('mosque') != -1) {
           icon_to_use =  base_Icon_mosque;
    }

    marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location,
    shadow: shadow_Icon,
    icon: icon_to_use  
    });

    google.maps.event.addListener(marker, 'mouseover', function() {
      infowindow.setContent(place.name);
      infowindow.open(map, this);
    });
  }

See: https://developers.google.com/maps/documentation/javascript/reference#PlaceResult

于 2012-08-02T10:54:31.657 回答