如何调整我的谷歌地图嵌入代码为v3 api更改 [英] How can I adapt my google maps embed code for v3 api change
问题描述
请在我的网站google地图的完整html代码之后找到。
Please find here after the full html code of my website google map.
自从我的地图的最后一个版本以来，我有相当的麻烦。
由于昨天的引脚不再可点击...
Since the last version of "My Maps", i have quite the troubles. Since yesterday pins are no more clickable...
地图链接不再一样。
我迷路了这段代码需要几天的工作，没有任何知识的HTML编码。
我只从不同的地方抓住了它的一部分+社区的帮助。
The maps links are no more the same. I'm lost; this code requires days of work without any knowledge of html coding. I have only grabbed portions of it from different places + help of your community.
有人可以帮我把这段代码重置为ON，并帮助我转换：
Could someone help me to reset this code to ON and help me to convert :
： https://www.google.com/maps/d/edit?hl=fr&authuser=0&mid=zC0evbx9jVqo.kFYO1Ed47KUg
几乎工作样本在 http://www.mynursery.be
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Exemple Google Maps JavaScript API v3</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<div id="carte" style="width: 920px; height: 750px"></div>
<br>
<input type='text' id='adresse' value=''>
<input type='submit' value='Cherchez votre ville !' onClick='rechercheAdresse();'>
<script type="text/javascript">
var map;
var kml = {
a: {
name: "CARTE BELGIQUE",
url: "https://maps.google.com/maps/ms?authuser=0&vps=2&hl=fr&ie=UTF8&msa=0&output=kml&msid=208899208399411894595.0004d24e3bd5bbd990f5d"
},
b: {
name: "Accueil familial subventionné",
url: "https://maps.google.be/maps/ms?msid=208899208399411894595.0004dadda3622da16f8c4&authuser=0&msa=0&vps=2&hl=fr&ie=UTF8&output=kml"
},
c: {
name: "Accueil familial autonome",
url: "https://maps.google.be/maps/ms?msid=208899208399411894595.0004dadda0922a7eaf40d&authuser=0&msa=0&vps=3&hl=fr&ie=UTF8&output=kml"
},
d: {
name: "Accueil collectif subventionné",
url: "https://maps.google.be/maps/ms?msid=208899208399411894595.0004daddae931fdcdc805&authuser=0&msa=0&vps=5&hl=fr&ie=UTF8&output=kml"
},
e: {
name: "Accueil collectif autonome",
url: "https://maps.google.be/maps/ms?msid=208899208399411894595.0004daddaa7c86a50424c&authuser=0&msa=0&vps=7&hl=fr&ie=UTF8&output=kml"
},
f: {
name: "Magasins petite enfance",
url: "https://maps.google.be/maps/ms?msid=208899208399411894595.0004dadda4c54c245991b&authuser=0&msa=0&vps=2&hl=fr&ie=UTF8&output=kml"
},
g: {
name: "Babysitters & Services",
url: "https://maps.google.be/maps/ms?msid=208899208399411894595.0004dadda5def521b12ea&authuser=0&msa=0&vps=6&hl=fr&ie=UTF8&output=kml"
},
};
var marker;
var geocoder = new google.maps.Geocoder();
function initialize() {
var toulouse = new google.maps.LatLng(50.581, 4.568);
var myOptions = {
zoom: 8,
minZoom: 8,
scrollwheel: false,
center: toulouse,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("carte"), myOptions);
createTogglers();};
google.maps.event.addDomListener(window, 'load', initialize);
// the important function... kml[id].xxxxx refers back to the top
function toggleKML(checked, id) {
if (checked) {
var layer = new google.maps.KmlLayer(kml[id].url, {
preserveViewport: true,
});
// store kml as obj
kml[id].obj = layer;
kml[id].obj.setMap(map);
}
else {
kml[id].obj.setMap(null);
delete kml[id].obj;
}
};
function createTogglers() {
var html = "<form><ul>";
for (var prop in kml) {
html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" +
" onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" +
kml[prop].name + "<\/li>";
}
html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" +
"Remove all layers<\/a><\/li>" +
"<\/ul><\/form>";
document.getElementById("toggle_box").innerHTML = html;
};
function removeAll() {
for (var prop in kml) {
if (kml[prop].obj) {
kml[prop].obj.setMap(null);
delete kml[prop].obj;
}
}
};
function highlight(box, listitem) {
var selected = 'selected';
var normal = 'normal';
document.getElementById(listitem).className = (box.checked ? selected: normal);
};
function startup() {
// for example, this toggles kml a on load and updates the menu selector
var checkit = document.getElementById('a');
checkit.checked = true;
toggleKML(checkit, 'a');
highlight(checkit, 'selector1');
};
google.maps.event.addListener(map, 'click', function(event) {
marker = new google.maps.Marker({position: event.latLng, map: map});
});
function rechercheAdresse() {
var adresse = document.getElementById('adresse').value;
geocoder.geocode({
address: adresse
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(12);
marker = new google.maps.Marker({
position: results[0].geometry.location,
clickable: false,
map: map
});
} else {
alert('Result not find !');
}
});
}
</script>
<style type="text/css">
.selected { font-weight: bold; }
</style>
<body onload="initialize();startup();">
<div id="toggle_box" style="position: absolute; top: 500px; right: 650px; padding: 10px; background: #fff; z-index: 5; "></div>
</html>
推荐答案
不完全确定您正在寻找什么...但考虑到新的vs旧地图，并且还运行您附加在该问题中的代码片段，当执行时不显示旧网站中的标记。它们是可以在更改代码时添加的一些自定义标记。请参阅此链接。
Not exactly sure what you are looking for... but considering the map in new vs old and also running this code snippet you have attached in the question, When executed doesn't shows the markers that are there in the old website. They are sort of custom markers that can be added with changing the code. For that please refer to this link.
在代码的initialize（）方法中，声明标记，以便它们将被添加到地图中。以下是一个示例代码来显示它们。
In the initialize() method of your code declare the markers so that they will be added in the maps. Here is a example code to display them.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
希望这将帮助!!
这篇关于如何调整我的谷歌地图嵌入代码为v3 api更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
