1

現在、このスニペットを使用して特定のページに地図を表示しています

<div id="map_canvas" style="width: 400px; height: 300px;"></div>
<div class="map_js">
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var myLatlng = new google.maps.LatLng(0, 0);
var mapOptions = {
  zoom: 15,
  center: myLatlng,
  scrollwheel: true,
  scaleControl: false,
  disableDefaultUI: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var geocoder_map = new google.maps.Geocoder();
var address = 'New York';
geocoder_map.geocode({
  'address': address
}, function (results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
      map: map,
      position: map.getCenter()
    });
    var contentString = 'Hello World New York is the most populous city in the United States.';
    var infowindow = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 200
    });
    google.maps.event.addListener(marker, 'click', function () {
      infowindow.open(map, marker)
    });
    infowindow.open(map, marker)
  } else {
    alert('Geocode was not successful for the following reason: ' + status)
  }
});
</script>
</div>

ただし、この画像http://d.pr/i/whoIでわかるように、情報ウィンドウはデフォルトのマップ UI と多少重なっています。

誰かがおそらくこの問題を解決する方法を知っていますか?

よろしく、 ジェン

4

0 に答える 0