Google Maps et ASP.NET ne font pas vraiment bon ménage surtout lorsque le site utilise une MasterPage.
Voici une astuce qui va vous permettre d’intégrer Google Maps sans effort en utilisant un iframe.
Pour commencer nous allons créer une page html qui contiendra la carte :
Code :
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">function initialize() {
var myLatlng = new google.maps.LatLng(43.317645, -0.438981);
var myOptions = { zoom: 16, center: myLatlng, mapTypeId: google.maps.MapTypeId.HYBRID }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infowindow = new google.maps.InfoWindow({ content: '<b>EL SALSERO</b> <br> rue Saint-Exupéry <br> 64230 LESCAR <br> <i>Anciennement "La Pression Paloise"</i>', size: new google.maps.Size(250, 100) });var marker = new google.maps.Marker({ position: myLatlng, map: map, title: "EL SALSERO" });
google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); });
}
</script>
<title>Carte</title>
</head>
<body style="margin: 0; background-color: #ffcc00" onload="initialize()" >
<div id="map_canvas" style="background-color: #ffcc00; width: 800px; height: 600px"></div></body>
</html>
Ensuite nous allons créer une page aspx qui contiendra l’iframe dans lequel s’affichera notre page html :
Code :
<%@ Page EnableEventValidation="false" Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="carte.aspx.vb" Inherits="public_carte" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="server" >
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div style="text-align: center">
<iframe id="mapFrame" src="carte.htm" scrolling="no" frameborder="0"
marginheight="0" marginwidth="0"
style="background-color: #ffcc00; width: 800px; height: 600px; text-align: center;"
align="middle" />
</div></asp:Content>
Vous remarquerez que l’iframe et et le div de la carte ont la même dimension (800 par 600) et que l’iframe n’a pas de bordure ce qui crée l’illusion.
Vous devez également mettre EnableEventValidation="false" dans l’entête de votre page aspx sous peine d’avoir un message d’erreur lorsque vous visiterez une autre page du site.
