如何调整我的谷歌地图嵌入代码以进行v3 api更改

时间:2015-01-15 12:17:32

标签: javascript html google-maps google-maps-api-3 dictionary

请在我的网站google地图的完整html代码后找到。

自上一版“我的地图"”以来,我遇到了很多麻烦。 因为昨天的针脚不再可点击......

地图链接不再相同。 我输了;这段代码需要几天的工作而不需要任何html编码知识。 我只是从不同的地方抓住了部分内容+社区的帮助。

有人可以帮助我将此代码重置为ON并帮助我转换:

旧AD:https://maps.google.be/maps/ms?msid=208899208399411894595.0004daddaa7c86a50424c&authuser=0&msa=0&vps=7&hl=fr&ie=UTF8&output=kml

新AD中的

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>

1 个答案:

答案 0 :(得分:0)

不完全确定您要查找的内容...但考虑到新旧版本中的地图并运行此代码段,您已附加问题,执行时未显示旧网站中的标记。它们是一种自定义标记,可以通过更改代码添加。为此,请参阅此link

在代码的initialize()方法中声明标记,以便将它们添加到地图中。这是一个显示它们的示例代码。

  <!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>

希望这会有所帮助!!