问题描述:

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

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.

Could someone help me to reset this code to ON and help me to convert :

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

in new AD : https://www.google.com/maps/d/edit?hl=fr&authuser=0&mid=zC0evbx9jVqo.kFYO1Ed47KUg

almost working sample at 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>

网友答案:

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.

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>

Hope this would Help!!

相关阅读:
Top