ウィジェットを作成し、iframe を使用して Google マップのコードをページに挿入していますが、ie8 で他のブラウザー (ff、safari、chrome ie9) では発生しない問題が発生しています。
問題は次のとおりです。
iframe からページに移動すると、マップが正しくレンダリングされません - 左にシフトしているようです。これは、(iframe からではなく) ページに直接アクセスした場合には発生しません。このGoogle マップが IE8 の iframe nyromodal レイヤー内で正しくレンダリングされないのを見てきましたが、これを行う方法がよくわかりません。
ページを呼び出す私の iframe は次のとおりです。
<div class="showGoogleMaps">
<iframe frameBorder="0" style="Background-color: Transparent;" allowtransparency="True" width=" 790" height=" 486" scrolling="no" src="http://localhost:7310/widgets/googlemaps/<%= Model.Product.ManufacturersPartNo%>"></iframe>
</div>
これが私のコードの全文です：
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Maps.Master" Inherits="System.Web.Mvc.ViewPage<WidgetView>" %>
<%@ Import Namespace="WidgetData" %>
<asp:Content ID="Content3" ContentPlaceHolderID="TitleContent" runat="server">
<%= Html.WidgetTitle(Model) %>
</asp:Content>
<asp:Content ID="WidgetStyle" ContentPlaceHolderID="StyleContent" runat="server">
<%= Html.WidgetStyle(Model) %>
<%= Html.WidgetScripts(Model) %>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<style type="text/css">
/*reset*/
*
{
margin: -1px;
padding: 0;
}
a
{
color: #3a6998;
}
img
{
border: none !important;
margin: 0px !important;
}
h1
{
font-family: 'Open Sans' , sans-serif;
font-size: 16px;
}
h2
{
font-family: 'Open Sans' , sans-serif;
font-size: 13px;
font-weight: bold;
}
h3
{
font-family: 'Open Sans' , sans-serif;
font-size: 12px;
font-weight: bold;
color: #3a6998;
}
p
{
font-family: 'Open Sans' , sans-serif;
font-size: 11px;
}
.divLogo
{
float: left;
height: 70px;
margin-left: 76px;
width: 152px;
}
.divLocator
{
float: left;
width: 790px;
height: 486px;
}
.topSection
{
float: left;
height: 58px;
margin-left: 45px;
margin-top: 87px;
width: 710px;
}
.topSectionLeft
{
float: left;
height: 90px;
width: 355px;
}
.topSectionRight
{
float: left;
height: 90px;
width: 355px;
}
#distanceMiles
{
width: 200px;
margin-left: 5px;
}
.divMapsArea
{
float: left;
height: 320px;
margin-left: 20px;
width: 748px;
}
.googleMaps
{
float: left;
width: 500px;
height: 325px;
}
#gmap_canvas
{
height: 292px;
margin: 10px 10px 10px 22px;
padding: 4px;
width: 445px;
float: left;
position: absolute;
}
.divAddress
{
float: left;
width: 208px;
height: 320px;
margin-left: 30px;
}
.addressscroll
{
height: 260px;
overflow: hidden;
padding-top: 20px;
width: 228px;
}
.singleadddress
{
padding-left: 10px;
height: 142px;
width: 221px;
}
#up
{
width: 30px;
height: 20px;
cursor: pointer;
}
#down
{
width: 40px;
height: 20px;
cursor: pointer;
}
</style>
<!-- TradeDoubler site verification 1851666 -->
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div class="maps">
<div class="divOuter">
<div class="divLocator">
<div class="topSection">
<div class="topSectionLeft">
<p>
Please enter your Postcode
<input id="enterPostCode" type="text" /></p>
</div>
<div class="topSectionRight">
<p>
Distance from your location
<select id="distanceMiles" name="distanceMiles">
<option value=""></option>
<option value="5">5 miles</option>
<option value="10">10 miles</option>
<option value="15">15 miles</option>
<option value="20">20 miles</option>
</select>
<input id="enterMiles" type="hidden" /></p>
</div>
</div>
<div class="upgradeTab">
</div>
<div class="divMapsArea">
<div class="googleMaps">
<!-- Displays the Google Map which was defined in the initialize script above, and defines the map size on the screen -->
<div id="gmap_canvas">
</div>
</div>
<div class="divAddress">
<div id="up">
<img class="upHide" src="http://static.e-talemedia.net/content/images/boschuparrow_button.png"
alt="top" /></div>
<div class="addressscroll">
<ul>
</ul>
</div>
<div id="down">
<img class="downHide" src="http://static.e-talemedia.net/content/images/boschdownarrow_button.png"
alt="top" /></div>
</div>
</div>
</div>
</div>
<!-- Calls javascript necessary for Google Maps API version 2 to function, and specifies the CGA's KEY -->
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAdFlw_bdW12bnMBM3AfjGfBQa9nlDfvnQNXCWVlyk6VX_22u3VxQLGoWhqJCthTl1MYZFfG0IyTxWUw"></script>
<!-- Signals to the browser that a section of javascript follows, and to read accordingly -->
<%-- <script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB67343qM6ehXlbHHMIXiB62GpnoGHCjQw">
</script>--%>
<script type="text/javascript">
//<![CDATA[
$(".divAddress").hide();
//indicates whether your application is using a sensor, such as a GPS device to determine user's location - we are not
google.load("maps", "2", { "other_params": "sensor=false" });
//Starts a javascript function named initialize which sets the Google Map display parameters, and is called in the html body upon page load
function initialize() {
var zoomGrade = 10;
//Loads and sets up the Google Map - gmap_canvas will be called in the html body to display it
gmap = new GMap2(document.getElementById("gmap_canvas"));
//Loads the large zoom/pan control
//gmap.addControl(new GLargeMapControl3D());
//Loads the small zoom control
gmap.addControl(new GSmallMapControl());
//Enables mouse scroll-wheel zooming
gmap.enableScrollWheelZoom();
//Loads the Map, Satellite, Hybrid map-type buttons
// gmap.addControl(new GMapTypeControl());
//Adds the Terrain map-type option, which is not a default
// gmap.addMapType(G_PHYSICAL_MAP);
//Sets the inital map to load. Change between PHYSICAL, SATELLITE, HYBRID, NORMAL. Default is NORMAL which loads the road map view
//gmap.setMapType(G_PHYSICAL_MAP);
//Sets the initial map location (latitude, longitude) in decimal degree format, and the zoom level (1 is zoomed out - 21 is farthest zoom in)
gmap.setCenter(new GLatLng(51.694031, 0.04505), zoomGrade);
$("#distanceMiles").change(function () {
$(".divAddress").hide();
$(".addressscroll ul").html('');
//clear the old markers if there are any
gmap.clearOverlays();
$("#distanceMiles option:selected").each(function () {
var manufacturerId = <%= Model.Manufacturer.Id%>;
var postcodeEntered = $("#enterPostCode").val();
var milesEntered = $(this).val();
if (postcodeEntered != null && milesEntered != null) {
var fqdn = "<%: Model.FullyQualifiedDomainName %>";
var theUrl ="/Widgets/GetPostcodes/" + manufacturerId + "/" + postcodeEntered + "/" + milesEntered;
$.ajax({
type: "POST",
//contentType: "application/json; charset=utf-8",
url: theUrl,
data: { 'manufacturerId': manufacturerId, 'postcodeEntered': postcodeEntered, 'milesEntered': milesEntered },
dataType: "json",
success: function (data) {
for(var i =0;i < data.length-1;i++)
{
var item = data[i];
//the count goes next to the retailer so we know which marker is for which
var count = i + 1;
//to custom the markers i need to use the number we are on (i)
var iconurl = "https://where-to-buy.co/content/images/marker"+ count +".png";
//Sets the initial map location (latitude, longitude) in decimal degree format, and the zoom level (1 is zoomed out - 21 is farthest zoom in)
gmap.setCenter(new GLatLng(item.OriginalLat,item.OriginalLong), item.ZoomLevel);
//trying this for the ie 8 issue
//Close bracket to end the function named initialize !!!very important to not delete this!!!
//javascript that sets up variables that enable the map to draw a custom icon.
var baseIcon = new GIcon();
baseIcon.iconSize = new GSize(32, 32);
baseIcon.shadowSize = new GSize(56, 32);
baseIcon.iconAnchor = new GPoint(16, 32);
baseIcon.infoWindowAnchor = new GPoint(16, 0);
var custom_icon = new GIcon(baseIcon, iconurl, null);
//end of custom icon code
//Adds a marker with window information - i have taken this out add html after point, and unrem addlistener bit to put back
function createMarker(point, icon) {
var marker = new GMarker(point, icon);
// GEvent.addListener(marker, "click", function () {
// marker.openInfoWindowHtml(html);
// });
return marker;
}
var point = new GLatLng(item.StoreLat, item.StoreLong); //here is the long and lat
// var marker = createMarker(point, item.StoreName + " " + item.Address1 + " " + item.TownCity + " " + item.Telephone, custom_icon); //here we can put store name and ink if there is one..
var marker = createMarker(point, custom_icon); //here we can put store name and ink if there is one..
gmap.addOverlay(marker);
//End of add marker code
var showDistance = item.Distance.toFixed(2);
//now i need to create a list that will display on the right hand side inside .addressscroll
$(".addressscroll ul").append("<li><div class=singleadddress><h2>" + count +" " + item.StoreName + "</h2><p>" + item.Address1 + "<br/>" + item.TownCity + " "+ item.Postcode +"<br/>" + item.Telephone + "<br/>" + showDistance + " miles</p><h3><a href = \"https://www.google.com/maps?q="+ item.MapsPostcode +"\" target=\"_blank\" >Display Map</a></h3><h3><a href = \"https://maps.google.co.uk/maps?f=d&hl=en&geocode=&saddr=" + item.OriginalMapsPostcode +"&daddr=" + item.MapsPostcode +"\" target=\"_blank\" >Display Route</a></h3></div></li> ");
//Creates a directions object and registers a map and DIV to hold the resulting computed directions
// var directionsPanel;
// var directions;
// directionsPanel = document.getElementById("my_directions_div");
// directions = new GDirections(gmap, directionsPanel);
// //Specify the FROM and TO for your directions: postcode to postcode
// directions.load("from: "+ item.OriginalPostcode +", to: "+ item.Postcode + "");
}
$(".divAddress").show();
$(".upHide").hide();
// get the number of .child elements
var totalitems = $(".addressscroll .singleadddress").length;
// get the height of .w6392597
var scrollval = $('.singleadddress').height();
// work out the total height.
var totalheight = (totalitems * scrollval) - ($(".addressscroll").height());
$(document).on("click", ".downHide", function () {
var currentscrollval = $('.addressscroll').scrollTop();
$('.addressscroll').scrollTop(scrollval + currentscrollval);
// hide/show buttons
if (currentscrollval == totalheight) {
$(this).hide();
}
else {
$(".upHide").show();
}
}); $(document).on("click", ".upHide", function () {
var currentscrollval = parseInt($('.addressscroll').scrollTop());
$('.addressscroll').scrollTop(currentscrollval - scrollval);
// hide/show buttons
if ((scrollval + currentscrollval) == scrollval) {
$(this).hide();
}
else {
$(".downHide").show();
}
});
}
});
}
});
});
}
//Ends this section of javascript, telling the browser to read XML again
//]]>
</script>
<!-- Signals to the browser that a section of javascript follows, and to read accordingly -->
<%-- <%= Html.GoogleMapsScriptsReturnPostcodeData(Model)%>--%>
</div>
</asp:Content>
MVC3を使用しています。
私は一日中これに取り組んでいましたが、どこに行くべきかわかりません。