2013-05-06 111 views
0

我有一個web應用程序,我加載所有我的網頁與ajax,現在我試圖加載谷歌地圖與下面的頁面。加載谷歌地圖geocoded在ajax頁面

問題解決,現在我可以使用下面的代碼加載一個帶有地址(地理編碼)的谷歌地圖。

<div id="map_external" class="notransform mapExternal"> 
    <input id="address" type="hidden" value="kungsgatan 14,varberg,sweden"> 

    <div id="header" class="toolbar"> 
    <h1>Google Map</h1> 
    <a href="#" class="back">BACK</a> 
    </div> 


      <div id="map_canvas" style=" height:600px!important;" class="notransform"></div> 


    <script> 

    jQuery(document).ready(function(){ 
    $('#map_external').bind('pageAnimationStart', function(event, info){ 
    if (info.direction == 'in') { 
    googleMaploadScript(); 
    } 
    });              
    }); 



function googleMaploadScript() { 
    var script =document.createElement("script"); 
    script.type="text/javascript"; 
    script.src="http://maps.google.com/maps/api/js?sensor=false&callback=initialize"; 
    document.body.appendChild(script); 

    //alert("script loaded"); 
    } 

var geocoder; 
var map; 
function initialize() { 

    geocoder = new google.maps.Geocoder(); 
    var mapOptions = { 
    zoom: 15, 
    center: undefined, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
    image = new google.maps.MarkerImage("http://www.mypage.com/images/googlemap/info.png",new google.maps.Size(32, 45)); 
    shadowi = new google.maps.MarkerImage("http://www.mypage.com/images/googlemap/shadow.png",new google.maps.Size(51, 37)); 
    codeAddress(); 
} 

function codeAddress() { 

    var address = document.getElementById('address').value; 
    geocoder.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: results[0].geometry.location, 
      shadow: shadowi, 
      icon: image 
     }); 
    } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
    } 
    }); 
} 



    </script> 

</div> 

回答

0

問題解決了,請參閱上面有關如何在ajax加載頁面中加載geocoded谷歌地圖。