2012-04-29 87 views
4

我有一個可以工作的谷歌地圖腳本,但我無法弄清楚如何將它添加到我的asp.net內容頁面。將腳本添加到頁面的正確方法是什麼?將腳本添加到asp.net內容頁面

見代碼:

<%@ Page Title="Our Location" Language="VB"  MasterPageFile="~/MasterPages/Frontend.master" AutoEventWireup="false" CodeFile="Location.aspx.vb" Inherits="About_Location" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
<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> 

<style type="text/css"> 
html { height: 100% } 
body { height: 100%; margin: 0px; padding: 0px } 
##map{ height: 100% } 
</style> 

</asp:Content> 


<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server" OnLoad="codeAddress()"> 

<script type= "text/javascript"> 

var geocoder; 
var map; 
var marker; 

function codeAddress() { 
    alert("hello") 


    //initializes the map 

    //create geocoder 
    geocoder = new google.maps.Geocoder(); 
    //set options for the map being created 
    var myOptions = { 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    //create map instance and pass it the myOptions object literal 
    map = new google.maps.Map(document.getElementById("map"), myOptions); 

    //geocode to get the lat and lng points of the given address 
    geocoder.geocode({ 'address': 'New York, New York'}, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      //if geocoder finds location 
      //center the map on the latlng points of the given address 
      map.setCenter(results[0].geometry.location); 
      map.setOptions({ zoom: 18 }); 
      //create marker and place it on the address 
      marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location, 
       title: 'New York, New York' 
      }); 
     } 
     else { 
      //if geocoder cannot find location, alert user 
      alert("Could not find location"); 
     } 
    }); 




} 





</script> 

<div id="map" style="width:700px; height:400px;"></div> 

</asp:Content> 

回答

4

把你的腳本在單獨的js文件,聲明它就像你與谷歌地圖做腳本。然後你必須調用它,也許將這個「#map」div id作爲參數發送給該腳本,而不是用javascript對其進行硬編碼。

在這種情況下

你想這樣做,在頁面負載腳本經理:

ScriptManager.RegisterStartupScript(this, this.GetType(), "ShowGoogleMap", "codeAddress('map');", true); 

BTW。對於谷歌地圖,你可以使用谷歌地圖服務器控制,它更容易使用從服務器端管理地圖:

http://googlemap.codeplex.com/