У меня возникла проблема получить карту google (v2) с помощью скрипта v3 для работы Основной код от geozip.Проблема, чтобы получить карту для работы с Google Maps API v3

У вас возникла эта проблема? Пока я думаю, что сделал все изменения, необходимые для Google Maps API v3, но он не работает. и я также сказать, что я новичок в JavaScript

Работа пример (v2)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<title>Google Maps JavaScript API Example</title> 
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw" 
    type="text/javascript"></script> 
<script type="text/javascript"> 
//<![CDATA[ 

var iconBlue = new GIcon(); 
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png'; 
iconBlue.iconSize = new GSize(26, 26); 
iconBlue.iconAnchor = new GPoint(6, 20); 
iconBlue.infoWindowAnchor = new GPoint(13, 0); 

var iconRed = new GIcon(); 
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png'; 
iconRed.iconSize = new GSize(26, 26); 
iconRed.iconAnchor = new GPoint(6, 20); 
iconRed.infoWindowAnchor = new GPoint(13, 0); 

var customIcons = []; 
customIcons["restaurant"] = iconBlue; 
customIcons["bar"] = iconRed; 
var markerGroups = { "restaurant": [], "bar": []}; 

function load() { 
    if (GBrowserIsCompatible()) { 
    var map = new GMap2(document.getElementById("map")); 
    map.setCenter(new GLatLng(47.191560, 15.305113), 12); 

    GDownloadUrl("markerdata.xml", function(data) { 
     var xml = GXml.parse(data); 
     var markers = xml.documentElement.getElementsByTagName("marker"); 
     for (var i = 0; i < markers.length; i++) { 
     var name = markers[i].getAttribute("name"); 
     var address = markers[i].getAttribute("address"); 
     var tel = markers[i].getAttribute("tel"); 
     var href= '<a href="'+markers[i].getAttribute("href")+'" target="_blank">'+markers[i].getAttribute("web")+'</a>'; 
     var image = '<img src="'+markers[i].getAttribute("image")+'" width="250" height="187" alt=""/>'; 
     var type = markers[i].getAttribute("type"); 
     var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), 
           parseFloat(markers[i].getAttribute("lng"))); 
     var marker = createMarker(point, name, address, tel, href, image, type); 
     map.addOverlay(marker); 
     } 
    }); 
    } 
} 

function createMarker(point, name, address, href, tel, image, type) { 
    var marker = new GMarker(point, customIcons[type]); 
    markerGroups[type].push(marker); 
    var html = "<font color='#008B00'><b>" + name + "</b></font> <br/>" + address + "<br><br>" + href + "<br>"+ tel + "<br><br>"+ image; 
    GEvent.addListener(marker, 'click', function() { 
    marker.openInfoWindowHtml(html); 
    }); 
    return marker; 
} 
function toggleGroup(type) { 
    for (var i = 0; i < markerGroups[type].length; i++) { 
    var marker = markerGroups[type][i]; 
    if (marker.isHidden()) { 
     marker.show(); 
    } else { 
     marker.hide(); 
    } 
    } 
} 
    //]]> 
    </script> 
    </head> 
    <body style="font-family:Arial, sans serif" onload="load()" onunload="GUnload()"> 
    <div id="map" style="float:left; width: 600px; height: 600px; border: 1px solid black"></div> 
    <div id="sidebar" style="float:left; width: 120px; height: 250px; border: 1px solid black"> 
    <input type="checkbox" id="restaurantCheckbox" onclick="toggleGroup('restaurant')" CHECKED /> 
    Restaurants 
    <br/> 
    <input type="checkbox" id="barCheckbox" onclick="toggleGroup('bar')" CHECKED/> 
    Bars 
    </div> 
    </body> 
</html>

Не работает exmaple (v3)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 

     <title>Google Maps JavaScript API Example</title> 

    <script src= 
"https://maps.googleapis.com/maps/api/js?v=3.17&amp;libraries=drawing,places,visualization" 
    type="text/javascript"></script> 


    <script type="text/javascript"> 
    //<![CDATA[ 



    var iconBlue = { 
    url: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 
    scaledSize: new google.maps.Size(26, 26), 
    }; 

var iconRed = { 
    url: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
    scaledSize: new google.maps.Size(26, 26), 
    }; 

    var customIcons = []; 
    customIcons["restaurant"] = iconBlue; 
    customIcons["bar"] = iconRed; 
    var markerGroups = { "restaurant": [], "bar": []}; 

     function initialize() { 
      var mapOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(47, 15) 
     }; 
     map = new google.maps.Map(document.getElementById('map'), 
      mapOptions); 

     downloadUrl("markerdata.xml", function(doc) { 
      var xmlDoc = xmlParse(doc); // var xml = xml.parse(doc); 
      var markers = xmlDoc.documentElement.getElementsByTagName("marker"); 
      for (var i = 0; i < markers.length; i++) { 
      var name = markers[i].getAttribute("name"); 
      var address = markers[i].getAttribute("address"); 
      var tel = markers[i].getAttribute("tel"); 
      var href= '<a href="'+markers[i].getAttribute("href")+'" target="_blank">'+markers[i].getAttribute("web")+'</a>'; 
      var image = '<img src="'+markers[i].getAttribute("image")+'" width="250" height="187" alt=""/>'; 
      var type = markers[i].getAttribute("type"); 
      var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), 
            parseFloat(markers[i].getAttribute("lng"))); 
      var marker = createMarker(point, name, address, tel, href, image, type); 
      marker.setMap(map); 
      } 
     }); 
     } 


    function createMarker(point, name, address, href, tel, image, type) { 
     var marker = new google.maps.marker(point, customIcons[type]); 
     markerGroups[type].push(marker); 
     var html = "<font color='#008B00'><b>" + name + "</b></font> <br/>" + address + "<br><br>" + href + "<br>"+ tel + "<br><br>"+ image; 
     google.maps.event.addListener(marker, 'click', function() { 
     marker.openInfoWindowHtml(html); 
     }); 
     return marker; 
    } 
    function toggleGroup(type) { 
     for (var i = 0; i < markerGroups[type].length; i++) { 
     var marker = markerGroups[type][i]; 
     if (marker.isHidden()) { 
      marker.show(); 
     } else { 
      marker.hide(); 
     } 
     } 
    } 

     google.maps.event.addDomListener(window, 'load', initialize); 
     //]]> 
     </script> 
     </head> 
     <body style="font-family:Arial, sans serif" onload="load()" onunload="GUnload()"> 
     <div id="map" style="float:left; width: 600px; height: 600px; border: 1px solid black"></div> 
     <div id="sidebar" style="float:left; width: 120px; height: 250px; border: 1px solid black"> 
     <input type="checkbox" id="restaurantCheckbox" onclick="toggleGroup('restaurant')" CHECKED /> 

      Restaurants 
      <br/> 

     <input type="checkbox" id="barCheckbox" onclick="toggleGroup('bar')" CHECKED/> 
     Bars 
     </div> 
     </body> 
    </html>

источник

2014-11-17 Manuel

Что такое 'xml.parse (doc);'? – geocodezip

Карты Google v2 устарели. Версия карты 'v = 3.5exp' неверна, она должна быть либо' v = 3.5', либо 'v = 3.exp'. Однако 'v = 3.5' устарел. MarkerImage устарел. – duncan

okey теперь я понял, что вы сказали duncan и geocodezip. Но, к сожалению, это не работает. – Manuel

Я изменил свой код, и теперь его работает на меня.

var imageGasthaus = { 
    url: 'image/gasthaus.png', 
    scaledSize: new google.maps.Size(26, 26), 
    };  
    var imageBar = { 
    url: 'image/arzt.png', 
    scaledSize: new google.maps.Size(26, 26), 
    }; 
     var customIcons = []; 
    customIcons["restaurant"] = imageGasthaus; 
    customIcons["bar"] = imageBar; 
    var markerGroups = { "restaurant": [], "bar": []}; 

    function createMarker(point, name, address, href, tel, image, type) { 
     var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     icon: customIcons[type], 
     zIndex: Math.round(latlng.lat()*-100000)<<5 
     }) 

     markerGroups[type].push(marker); 
     var html = "<font color='#008B00'><b>" + name + "</b></font> <br/>" + address + "<br><br>" + href + "<br>"+ tel + "<br><br>"+ image; 
     google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map, marker, html); 
     }); 
     return marker; 
    } 

    function initialize() { 

var myOptions = { 
    zoom: 8, 
    center: new google.maps.LatLng(47,15), 
    mapTypeControl: true, 
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
    navigationControl: true, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map"), 
           myOptions); 

downloadUrl("markerdata.xml", function(doc) { 
     var xmlDoc = xmlParse(doc); 
     var markers = xmlDoc.documentElement.getElementsByTagName("marker"); 

      for (var i = 0; i < markers.length; i++) { 
      var name = markers[i].getAttribute("name"); 
      var address = markers[i].getAttribute("address"); 
      var tel = markers[i].getAttribute("tel"); 
      var href= '<a href="'+markers[i].getAttribute("href")+'" target="_blank">'+markers[i].getAttribute("web")+'</a>'; 
      var image = '<img src="'+markers[i].getAttribute("image")+'" width="250" height="187" alt=""/>'; 
      var type = markers[i].getAttribute("type"); 
      point = new google.maps.Lat.Lng(parseFloat(markers[i].getAttribute("lat")), 
            parseFloat(markers[i].getAttribute("lng"))); 

      var marker = createMarker(point, name, address, tel, href, image, type); 

      } 
     }); 
     } 



    function toggleGroup(type) { 
     for (var i = 0; i < markerGroups[type].length; i++) { 
     var marker = markerGroups[type][i]; 
     if (marker.isHidden()) { 
      marker.show(); 
     } else { 
      marker.hide(); 
     } 
     } 
    }

источник

2014-11-22 17:21:48 selman

Проблема, чтобы получить карту для работы с Google Maps API v3

Работа пример (v2)

Не работает exmaple (v3)

ответ

Смежные вопросы