地理位置添加到标准的自定义谷歌地图

我想添加地理位置自定义公共谷歌地图，我无法设法让它工作。 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

地理位置添加到标准的自定义谷歌地图

回答

相关问题