0

サイトの 1 つに Google マップを追加しています。ドロップダウン リストに多くの州名があります。それらをクリックすると、マップが適切な場所にパンされます。しかし、マーカー アイコンはマップの中央にありません。1 つの場所を選択すると、選択した場所がマップの中央に来るようにします。選択した場所のマークアップは次のようになります

<div class="state">
    <label>Please Select State</label> <br />
    <select id="selectState" class="statelist" onchange="changeZoomCenter(this.value,'12');">
    </select>
  </div>

そして、Googleマップのコードは次のようになります

function changeicons(z){   }
  var customIcons = {
    restaurant: {
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569',
      shadow: 'marker/mm_20_shadow.png'
    },
  };
  var map;
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
  var bounds = new google.maps.LatLngBounds();
  var markerArray = [];
  function loadMap() {
    map = new google.maps.Map(document.getElementById("map-canvas"), {
    center: new google.maps.LatLng(20.0000, 78.0000),
    zoom: 5,
    mapTypeId: 'roadmap'
  });
    google.maps.event.addListener(map, 'zoom_changed', function() {
      var zoomLevel = map.getZoom();
      changeicons(zoomLevel);
    }); 
    var infoWindow = new google.maps.InfoWindow;
      // Change this depending on the name of your PHP file
      downloadUrl("googlemap/xml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
         // var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var storeid = markers[i].getAttribute("store_id");
          //var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons['restaurant'] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            //shadow: icon.shadow,
      animation: google.maps.Animation.DROP
          });
      markerArray.push(marker);
      bounds.extend(marker.position);
          bindInfoWindow(marker, map, infoWindow, html, storeid);
        }
    map.fitBounds(bounds);

      });

    }



    function bindInfoWindow(marker, map, infoWindow, html, storeid) {
      google.maps.event.addListener(marker, 'click', function() {
        var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;
        request.onreadystatechange = function() {
        if (request.readyState == 4) {
           infoWindow.setContent(request.responseText+html);
               infoWindow.open(map, marker);
        }
        };

        request.open('GET', 'php/infobox.php?id='+storeid, true);
        request.send(null);

      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }





  function changeZoomCenter(ll,z){
        var geo = new google.maps.Geocoder;
        geo.geocode({'address':ll},function(results, status){
          if (status == google.maps.GeocoderStatus.OK) {              
            var myLatLng = results[0].geometry.location;
             map.panTo(myLatLng);

             z=parseInt(z);
             map.setZoom(z);
          } else {
            alert("Geocode was not successful for the following reason: " + status);
          }
        });

  }


    function road(s,e) {
  var start = s;
  var end = e;
  directionsDisplay = new google.maps.DirectionsRenderer();
  directionsDisplay.setMap(map);
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

}

ページの中央にマーカー(アイコン)を作成する方法を教えてください。

4

0 に答える 0