2013-08-22 143 views
2

我想創建谷歌地圖。現在它顯示在第一個屏幕截圖中。 但我希望它顯示在第二個屏幕截圖。有什麼方法可以完成任務嗎?谷歌地圖不按預期顯示

我用下面的JavaScript代碼,以顯示谷歌地圖:

<script type="text/javascript"> 
    var map; 
    var infowindow; 
    var url = document.URL; 
    var id_check = /[?&]park=([^&]+)/i; 
    var match1 = id_check.exec(url); 
    if (match1 != null) { 
     final_id = match1[1]; 
    } else { 
     final_id = ""; 
    } 
    final_id = final_id.replace(/%/g, " "); 
    final_id = final_id.replace(/20/g, ""); 
    var latlong = /[?&]latlong=([^&]+)/i; 
    var latlongmatch = latlong.exec(url); 
    if (latlongmatch != null) { 
     latlong = latlongmatch[1]; 
    } 
    else { 
     latlong = ""; 
    } 
    latlong = latlong.replace(/%/g, " "); 
    latlong = latlong.replace(/20/g, ""); 
    // alert(final_id); 
    function initialize() { 
     var split = latlong.split(','); 
     var lat = split[0]; 
     var long = split[1]; 
     var loca = new google.maps.LatLng(lat,long); 
     map = new google.maps.Map(document.getElementById('map'), { 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      travelmode: google.maps.TravelMode.BICYCLING, 
      center: loca, 
      zoom: 14 
     }); 

     var request = { 
      location: loca, 
      radius: 10000, 
      //name: 'State Game Lands', 
      //keyword: 'State Game Lands', 
      //type: ['State Game Lands'] 


     }; 
     infowindow = new google.maps.InfoWindow(); 
     var service = new google.maps.places.PlacesService(map); 
     service.nearbySearch(request, callback); 
    } 

    function callback(results, status) { 
     if (status == google.maps.places.PlacesServiceStatus.OK) { 
      for (var i = 0; i < 2; i++) { 
       alert(results[i].geometry.location.formatted_address); 
       createMarker(results[i]); 
      } 
     } 
    } 

    function createMarker(place) { 
     var split = latlong.split(','); 
     var lat = split[0]; 
     var long = split[1]; 
     var placeLoc = place.geometry.location; 
     var marker = new google.maps.Marker({ 
      map: map, 
      //position: place.geometry.location 

      position: new google.maps.LatLng(lat,long) 
     }); 

     google.maps.event.addListener(marker, 'mouseover', function() { 
      infowindow.setContent(final_id); 
      infowindow.open(map, this); 
      //marker.openInfoWindowHtml(final_id); 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

第一張截圖(現在diplaying因爲這)

Google Map without appear display

第二個屏幕(應該顯示爲此)

Google map with display view

+0

目前還不清楚到底是什麼你想要做的。如果您只想要衛星視圖,請使用@ geedubb的答案。如果你想改變你的infowindow的內容,這將需要更多的工作 – duncan

回答

2

如果你想讓它顯示爲衛星,只是改變了行:

mapTypeId: google.maps.MapTypeId.ROADMAP, 

mapTypeId: google.maps.MapTypeId.SATELLITE, 
0

設置你的縮放級別和地圖類型

    var mapOptions = { 
        center: new google.maps.LatLng(43.653226, -79.3831843), 
         zoom: 14, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
        }; 
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);