将经度和纬度传递到Google地图的初始化函数

Question

I am trying to pass a longitude and latitude to Google Maps JavaScript V3 api. My code as below should take the googleLatLong variable from the switch and then pass it to the Google initialize() function. However at the moment the googleLatLong variable is not accessible in the initialize() function. How do I pass it through?

Thanks in advance.

JavaScript in the head:

<script type="text/javascript"> 
//function to get a parameter from the query string
var queryString = function(){
  var s = window.location.search.substr(1),
      p = s.split(/\&/),
      l = p.length, 
      kv, r = {};
  if(l === 0){return false;}
    while(l--){
      kv = p[l].split(/\=/);
      r[kv[0]] = kv[1] || true;
    }
    return r;
}();

//get params from the url
var storeCode = queryString.store;

//switch page params based on the store code
switch(storeCode) {
    case 'POO746':
        var storeName = 'Poole';
        var googleLatLong = '50.736129,-1.988229';
        var trafficURL = 'http://hatrafficinfo.dft.gov.uk/feeds/rss/CurrentAndFutureEvents/South%20West.xml';
        break;
    case 'BRS464':
        var storeName = 'Bognor Regis';
        var googleLatLong = '50.798991,-0.667444';
        var trafficURL = 'http://hatrafficinfo.dft.gov.uk/feeds/rss/CurrentAndFutureEvents/South%20East.xml';
        break;
}    

</script>

JavaScript in the body:

<script type="text/javascript">
var map

function initialize() {
    var store = new google.maps.LatLng(googleLatLong);
    var myOptions = {
        zoom:12,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        disableDefaultUI: true,
        center: store
    }   
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(map);

}

window.onload = function () {
    initialize();
}
</script>


    <div id="trafficMap">
        <div id="map_canvas"></div>
</div>

Answer 1

Make it global to the page, so you'll have these globals:

var storeCode = queryString.store;
var googleLatLong;
var map;

Answer 2

Parse the query string in your initialize function.

<script type="text/javascript">
var map

  //function to get a parameter from the query string
  var queryString = function(){
    var s = window.location.search.substr(1),
      p = s.split(/\&/),
      l = p.length, 
      kv, r = {};
    if(l === 0){return false;}
      while(l--){
        kv = p[l].split(/\=/);
        r[kv[0]] = kv[1] || true;
      }
      return r;
  }();

function initialize() {


//get params from the url
var storeCode = queryString.store;

//switch page params based on the store code
switch(storeCode) {
    case 'POO746':
        var storeName = 'Poole';
        var googleLatLong = new google.maps.LatLng(50.736129,-1.988229);
        var trafficURL = 'http://hatrafficinfo.dft.gov.uk/feeds/rss/CurrentAndFutureEvents/South%20West.xml';
        break;
    case 'BRS464':
        var storeName = 'Bognor Regis';
        var googleLatLong = new google.maps.LatLng(50.798991,-0.667444);
        var trafficURL = 'http://hatrafficinfo.dft.gov.uk/feeds/rss/CurrentAndFutureEvents/South%20East.xml';
        break;
}




    var store = googleLatLong;
    var myOptions = {
        zoom:12,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        disableDefaultUI: true,
        center: store
    }   
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(map);

}

window.onload = function () {
    initialize();
}
</script>

• Example
• Example with your code/BRS464
• Example with your code/POO746

Answer 3

I managed to fix this in the end by splitting out the longitude and lattitude. Creating seperate vars for longitude and latitude. Instead of

 var googleLatLong = '50.736129,-1.988229';

I now have:

 var glat = '50.736129';
 var glong = '-1.988229';

and in the Google Maps initialize function it now looks like this:

 var store = new google.maps.LatLng(glat,glong);

Not really sure why it wasn't working with the combined longitude and latitude variable but there you go, making this change made the code work.