如何初始化pageinit上的谷歌地圖，而無需重複加載谷歌地圖API腳本

Question

• 我想只能加載一次Google.maps API來獲取我的頁面。
• 然後，我想能夠使用地理定位或將地圖加載到我的Web應用程序中的任何地方的頁面上。
• 問題是，我不能找出單獨的API加載和映射初始化。 這意味着我每次創建地圖時都需要加載API。

我已經在後文中進一步引用了大部分代碼，但我想下面的代碼是問題。這段代碼負責API加載但同時它負責設置初始化（）函數作爲回調函數並調用它。

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

我怎麼一次加載API，可以說在頭，然後創建一個新的地圖，每次我去特定的網頁。無需再次加載地圖API。 （注意：使用jQuery移動，即時通訊，所以我的頭只被加載一次一個會話）。

我得到這個錯誤：

警告：你已經包括此頁面上的谷歌地圖API多次。這可能會導致意外的錯誤。

我想告訴你我的設置。

-Im使用谷歌地圖API V3

- 我加載頁面加載後動態的API。

-I'm使用jquery移動版，這意味着只有當您訪問它時纔會部分重新加載谷歌地圖的頁面。

-Im使用谷歌地圖兩件事情來顯示地圖和地理位置。

- 我在幾個頁面上使用Google map api。

林與3個不同的地點的地圖交互：在一個標題的javascript見下文

• 甲標題代碼的JavaScript

• 在本體A的javascript

• 的DIV在持有地圖的身體中。

這裏是我的，處理加載API的JavaScript代碼，顯示地圖上，標記等：

 <script> 
      $('.error').hide(); 
      //search criterias 
      var radius; 
      var timerange; 
      var type; 
      //user position variables 
      var userposition = false; 
      var mylatitudedegree = "=55.698"; 
      var mylongitudedegree = "=12.579"; 
      //map variables 
      var mapready = false; 
      var map; 
      var bound; 
      var markersArray = []; 
      //array for keeping track of the markers 
      var markercenter; 
      //hack 
      var pageinit = 0; 
      var initializer = 0; 
      var triggersearch = 0; 
      var loadscripts = 0; 
      var isgooglemapsloaded = false; 

       $('#soegsagside').live('pageinit',function(event) 
       { 
       pageinit++; 

       if (navigator.geolocation) { 
        navigator.geolocation.getCurrentPosition(setPosition, function(error) { 
         alert('Din location er ikke tilgængelig! Error code: ' + error.code); 
         userposition = false; 
        }, { 
         maximumAge : 60000, 
         timeout : 10000, 
         enableHighAccuracy : true 
        }); 
       } 
       else { 
        alert("Din browser tillader ikke, at vise din lokation!"); 
        userposition = false; 
       } 

       loadScript();  

       $("#search_filter_button").click(function() { 
        //hide the "skal udfyldes" labels 
        $('.error').hide(); 
        // validate and process form here 
        radius = $("select#choose_radius_select").val(); 
        if (radius == "vælg") { 
         $("label#radius_error").show(); 
         $("select#choose_radius_select").focus(); 
         return false; 
        } 
        timerange = $("select#choose_timerange_select").val(); 
        if (timerange == "vælg") { 
         $("label#timerange_error").show(); 
         $("select#choose_timerange_select").focus(); 
         return false; 
        } 
        type = $("select#vælg_type").val(); 
        if (type == "vælg") { 
         $("label#select_type_error").show(); 
         $("select#vælg_type").focus(); 
         return false; 
        } 
        //------------------post to php script --------------- 
        var dataString = 'radius=' + radius + '&timerange=' + timerange + '&type=' + type + '&mylatitudedegree=' + mylatitudedegree + '&mylongitudedegree=' + mylongitudedegree; 
        $.ajax({ 
         type : "POST", 
         url : "soegsagDB.php", 
         data : dataString, 
         success : function(data) { 
          $('#søgeresultater').html(data); 
          $('#søgeresultater').trigger('create'); 
          clearOverlays(); 
          createtaskmarkers(); 
          findCenterOfMarkers(); 
          if (userposition) { 
           usergeoposition = new google.maps.LatLng(mylatitudedegree, mylongitudedegree); 
           map.setCenter(usergeoposition); 
           createuserposition(usergeoposition); 
          } else { 
           map.setCenter(markercenter); 
          } 
          expandMapBoundForMarkers() 

         } 
        }); 
        //end of post search query to server 
        return false; 
       }); 
       //end of click seach button 
      }); 
      //end of page ready 

      function setPosition(position) { 
       userposition = true; 
       myposition = position.coords; 
       mylatitudedegree = position.coords.latitude; 
       mylongitudedegree = position.coords.longitude; 
       var milli = new Date(); 
      } 

      //function for clearing the markerArray 
      function clearOverlays() { 
       for (var i = 0; i < markersArray.length; i++) { 
        markersArray[i].setMap(null); 
       } 
      } 

      //Function for initializing the map, which is called when the map is created 
      function initialize() { 
       initializer++; 
       bound = new google.maps.LatLngBounds(); 

       var mapOptions = { 
        zoom : 13, 
        center : new google.maps.LatLng(55, 12), 
        mapTypeId : google.maps.MapTypeId.ROADMAP 
       } 

       //Create a map 
       map = new google.maps.Map(document.getElementById("map"), mapOptions); 
       mapready = true; 
       $("#search_filter_button").trigger('click');//Trigger click on the search button 
       triggersearch++; 
      } 

      //create user positio marker 
      function createuserposition(usergeoposition) { 
       var userPositionMarker = new google.maps.Marker({ 
        position : usergeoposition, 
        map : map, 
        title : "Din position", 
       }); 
       markersArray.push(userPositionMarker); 
      } 

      function createtaskmarkers() { 
       //Create the markers of the tasks 
       //1. find the task <li> that contain the data and loop through each one 
       //2. for each task collect the dato into variables and create markers and infowindows 
       //3. calculate center of point 
       //4. extendt map area to contain all points 

       var data = $.map($('li'), function(element) { 
        if (element.hasAttribute("data-latitude")) { 

         var tempPos = new google.maps.LatLng($(element).attr('data-latitude'), $(element).attr('data-longitude')); 
         var link = $(element).attr('data-link'); 
         var title = $(element).attr('data-title'); 
         var type = $(element).attr('data-type'); 
         var date = $(element).attr('data-date'); 

         tempMarker = new google.maps.Marker({ 
          position : tempPos, 
          map : map, 
          title : title, 
         }); 

         tempMarker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png') 

         var tempContentString = '<div style="width: 200px; height: 100px;">' + date + '<br></br>' + '<a href="' + link + '" rel="external"><b>' + type + ' , ' + title + '</b></a>' + '</div>'; 

         //Create infowindow 
         var tempInfowindow = new google.maps.InfoWindow({ 
          content : tempContentString 
         }); 
         //add market to markerArray 
         markersArray.push(tempMarker); 
         //Create event with infowindow 
         google.maps.event.addListener(tempMarker, 'click', function() { 
          tempInfowindow.open(map, this); 
         }); 
        } 
       }); 
      } 

      function findCenterOfMarkers() { 
       //calculate center of markers and change mapcenter to that 
       var sumlatitude = 0; 
       var sumlongitude = 0; 
       for (position = 0; position < markersArray.length; position++) { 
        sumlatitude += markersArray[position].getPosition().lat(); 
        sumlongitude += markersArray[position].getPosition().lat(); 
       } 
       avglatitude = sumlatitude/markersArray.length; 
       avglongitude = sumlongitude/markersArray.length; 
       markercenter = new google.maps.LatLng(avglatitude, avglongitude); 
      } 

      function expandMapBoundForMarkers() { 
       //Extend bounds for map to fit all markers into map 
       for (var i in markersArray) { 
        bound.extend(markersArray[i].getPosition()); 
       } 
       map.fitBounds(bound); 
      } 

      //loads the google maps api with KEY and appends the script to the document body 
      function loadScript() { 
       var script = document.createElement("script"); 
       script.type = "text/javascript"; 
       script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyC8wZ6RmFySy0DnWvrUaA-2OJqcM1_AOIc&sensor=false&callback=initialize"; 
       document.body.appendChild(script); 
      } 
      </script> 

在頁面的正文中唯一具有與地圖做。是地圖加載到的DIV。

<div id="map" style="width: 80%; height: 280px; margin: auto; background-color: gray">Kortet loader, vent venligst.</div> <!--alternative for full screen style="position:absolute;top:30px;bottom:50px;left:0;right:0;"--> 

該API也加載在一個公共頭文件腳本中。因爲我通常需要將其加載到其他頁面上。

<script src='http://maps.google.com/maps/api/js?sensor=false'></script> 

Answer 1

<script type="text/javascript"> 
     $(document).ready(function() { 

     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=mynamespace.init_google_maps"; 
     document.body.appendChild(script); 
    $(document).bind('pageinit', function() { 
    //do stuff here that happens each time a new page is loaded 

    }); 
    }); 
}); 
</script> 

所述API是內部。就緒加載一次（）。您可以在傳遞給.bind（）的回調中創建一個新映射，每次加載或插入新頁面時都會調用該映射。你可以初始化mynamespace中的地圖。 mynamespace是一個包含在頁面上的.js文件。