谷歌地图APIv3 -通过地理代码添加标记
Google Maps APIv3 - adding markers via geocode
所以我有这个脚本,我试图添加标记到我用Javascript创建的地图。我想我很接近正确(是的,正确),但我不确定我做错了什么,我似乎无法破译我得到的错误。
我做的第一件事就是将google API密钥添加到我的站点。
然后,我在脚本中做的第一件事是加载搜索和映射api:(function ($) {
$("document").ready(function() {
google.load("maps", 2, {"callback": mapsLoaded});
});
})(jQuery);
在'maps' API加载后,maploaded方法被调用:
function mapsLoaded() {
//Create the options for the map and imediately after create the map.
var myOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("result_map"), myOptions);
showUserLocation(map);
var image = '../misc/planbMarker.png';
var postcodes = document.getElementsByClassName('result-postcode');
var geocoder = new google.maps.Geocoder();
for(var i = 0; i < postcodes.length; i++) {
var address = postcodes[i].value;
geocoder.geocode({'address': address}, function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[i].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
showUserLocation函数只是获取用户的当前位置并把它放在地图中:
function showUserLocation(map) {
//Define the user's initial location
var initialLocation;
//Define the variable to see if geolocation is supported.
var browserSupportFlag = new Boolean();
// Try W3C Geolocation (Preferred)
if(navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
// Browser doesn't support Geolocation
} else {
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
alert("Geolocation service failed. Defaulting to Aberdeen.");
initialLocation = new google.maps.LatLng(57.149953,-2.104053);
} else {
alert("Your browser doesn't support geolocation. We've placed you in Aberdeen.");
initialLocation = new google.maps.LatLng(57.149953,-2.104053);
}
map.setCenter(initialLocation);
}
//Put a marker on the user's current position different than the markers for the venues.
navigator.geolocation.getCurrentPosition(function(position) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(position.coords.latitude,position.coords.longitude),
map: map,
title:"Hello World!"});
});
}
现在,当我运行这个时,我得到的错误是:Uncaught TypeError: Cannot call method 'appendChild' of null at maps:1
跟着:Uncaught TypeError: Object #<Object> has no method '__gjsload__'
,大约5秒后,这也弹出在javascript控制台:
Error in event handler for 'undefined': TypeError: Cannot call method 'postMessage' of null
at chrome/RendererExtensionBindings:100:18
at chrome-extension://bmagokdooijbeehmkpknfglimnifench/contentScript.js:128:13
at [object Object].dispatch (chrome/EventBindings:182:28)
at chrome/RendererExtensionBindings:99:24
at [object Object].dispatch (chrome/EventBindings:182:28)
at Object.<anonymous> (chrome/RendererExtensionBindings:149:22)
在旁注上,作为另一个可能的症状,当这个错误发生时,Chrome显示一个空白页面(如果你去查看源标记都在那里,但页面是空白的)。我正在运行Drupal 7.10。
有人知道我做错了什么吗?
首先,Google Maps API 3不需要API密钥(除非我们指的是最近为每日地图浏览量超过25,000的网站引入的密钥,这可能需要付费使用)。听起来你把API 2所需的键和API 3的代码混在了一起。
其次,这些都是错误的。'i'是邮政编码数组的变量,它与结果数组
没有关系。for(var i = 0; i < postcodes.length; i++) {
var address = postcodes[i].value;
geocoder.geocode({'address': address}, function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[i].geometry.location
相关文章:
- 将 jQuery 代码添加到 Index.aspx 页面
- Javascript代码添加了一些不应该存在的内容
- 将Google AdWords转换跟踪(javascript)代码添加到PrestaShop/Smarty页面中
- 向以下代码添加不接受“0”的另一个条件
- 如何为该代码添加回调函数
- 将javascript代码添加到URL
- jquery将HTML代码添加到页面中
- jQuery/can'我找不到避免代码添加类的方法
- 如何将我自己的验证代码添加到MooTools的lightface表单中
- 需要帮助将一些JavaScript代码添加到我的wordpress主题中
- 将 JQuery 或 Javascript(不是 coffee.script)代码添加到 Rails 3.2 应用程序中
- JQuery 悬停代码:添加 If 语句会破坏它
- 如何在jsp中单击按钮时将代码添加到jqPlot条形图另存为图像
- JavaScript 将代码添加到已经设置的事件中
- 仅将 Javascript 代码添加到最后一个文本区域
- 如何使用此示例使用 javascript 将代码添加到我的表单标签中
- 将 Jquery 无冲突代码添加到我当前的代码中
- 如何将自定义代码添加到prestashop
- 调试JavaScript和css代码:添加一个事件处理程序
- Dojo 使用 domConstruct 将声明性代码添加到现有手风琴中