地理位置添加到標準的自定義谷歌地圖

我想添加地理位置自定義公共谷歌地圖，我無法設法讓它工作。 For example here is a custom public google map。地理位置添加到標準的自定義谷歌地圖

可以說我想將地理定位添加到該地圖。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

以及我只是改變了「.getElementsById」到「.getElementsByClassName」以下：

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

function initialize() { 
    var mapOptions = { 
    zoom: 3, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementsByClassName('map-canvas'), 
     mapOptions); 

    // Try HTML5 geolocation 
    if(navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = new google.maps.LatLng(position.coords.latitude, 
             position.coords.longitude); 

     var infowindow = new google.maps.InfoWindow({ 
     map: map, 
     position: pos, 
     content: 'Location found using HTML5.' 
     }); 

     map.setCenter(pos); 
    }, function() { 
     handleNoGeolocation(true); 
    }); 
    } else { 
    // Browser doesn't support Geolocation 
    handleNoGeolocation(false); 
    } 
} 

function handleNoGeolocation(errorFlag) { 
    if (errorFlag) { 
    var content = 'Error: The Geolocation service failed.'; 
    } else { 
    var content = 'Error: Your browser doesn\'t support geolocation.'; 
    } 

    var options = { 
    map: map, 
    position: new google.maps.LatLng(60, 105), 
    content: content 
    }; 

    var infowindow = new google.maps.InfoWindow(options); 
    map.setCenter(options.position); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script>

我已經是直接關閉谷歌地圖API的網站在網站上以下然後，我呼籲地圖是在燈箱廣告：

<a href="https://maps.google.ca/maps/ms?msa=0&msid=202458571791405992786.0004b9061a3fcd9461d42&lightbox[width]=70p&lightbox[height]=70p" class="map-canvas lightbox"><h2 class="dis">Where can I<br />get Rumble?</h2></a>

它顯示在地圖的罰款，並要求進行地理定位，但我認爲它不是這張地圖上工作的原因是因爲它不包括我在API中。

我一直希望有人對此有一個解決方案。

來源

2013-07-02 matt

This不是基於API的地圖。您可以通過API based map

在地圖上顯示KML。然後使用您的地理位置代碼將地圖居中（取決於排序，您可能需要使用KmlLayer上的preserveViewport：true選項）。下面的相關代碼，請參閱documenation瞭解更多示例和信息。

這是在現有的頁面（請留下你們的版本）

var myOptions = { 
    zoom: 5, 
    center: new google.maps.LatLng(0,0), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

添加這從您的「自定義地圖」顯示的數據：

var kmlLayer = new google.maps.KmlLayer("https://maps.google.ca/maps/ms?ie=UTF8&msa=0&output=kml&msid=202458571791405992786.0004b9061a3fcd9461d42"); 
kmlLayer.setMap(map);

來源

2013-07-02 18:12:48 geocodezip

對不起提前爲這個問題，但我不知道爲什麼地圖甚至沒有顯示在第一位。我已將此頁的代碼複製到此處： https://developers.google.com/maps/documentation/javascript/examples/map-geolocation 將空白HTML文檔放入一個空白HTML文檔中，我甚至不會看到該地圖？我認爲，除了那個問題之外，這些都是排序的再次感謝所有的幫助。 – matt

你的問題是[FAQ]（http://stackoverflow.com/search?q= [google-maps-api-3] + default.css）。你是否將[default.css]（https://developers.google.com/maps/documentation/javascript/examples/default.css）文件複製到本地目錄，鏈接到該文件的絕對URL（不是一個好主意在生產中，但可以進行快速測試）或包含等效的css內聯？（地圖需要有一個尺寸，否則你看不到） – geocodezip

是的，我把它作爲內部樣式表添加到文檔的頭部。奇怪。您可以在此處看到地圖：http://drinkrumble.com/rumble_fr/test.html – matt

地理位置添加到標準的自定義谷歌地圖

回答

相關問題