Карты Google, увеличение до разных точек

Question

Я ищу способ реализовать Карты Google на своей странице, постоянно увеличивая масштаб до разных мест (скажем, 10 мест) и циклируя вокруг. У Just Park есть аналогичная вещь (на рабочем столе) - www.justpark.com.

Я немного тупик, где начать действительно. Любые указатели будут замечательными.

Спасибо.

Answer 1

Ну Документация по API Карт Google будет отличное место для начала: https://developers.google.com/maps/documentation/javascript/tutorial

Вам также может понадобиться использовать API Google геокодирование для извлечь координаты (широта & долготы), чтобы сопоставить маркера на основе от конкретных адресов и местоположения. Ссылка на документацию здесь: https://developers.google.com/maps/documentation/geocoding/

Как только у вас есть маркеры, которые вы хотите на месте, вы можете пропустить их, но с задержкой.

Примечание: функциональность Окно информации можно найти в Документации по API Карт Google

Answer 2

надеюсь, что это может помочь вам demo link .. от geocodezip

google.maps.event.addDomListener(window, 'load', function() { 
 
    load(-5.162764, 119.443118, 13); 
 
}); 
 
var customIcons = { 
 
    restaurant: { 
 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 
 
     shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
 
    }, 
 
    bar: { 
 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
 
     shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
 
    } 
 
}; 
 

 
var cluster = []; 
 
var infowindow = new google.maps.InfoWindow(); 
 

 
function load(lt, lg, zoom) { 
 

 
    var map = new google.maps.Map(document.getElementById("map"), { 
 
     center: new google.maps.LatLng(lt, lg), 
 
     zoom: zoom, 
 
     mapTypeId: 'roadmap' 
 
    }); 
 

 

 

 

 
    // downloadUrl("phpsqlajax_genxml3.php ", function(data) { 
 
    // var xml = data.responseXML; 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var xml = parseXml(sampleXmlData); 
 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
 
    var sidebarStr = ""; 
 
    for (var i = 0; i < markers.length; i++) { 
 
     var name = markers[i].getAttribute("name"); 
 
     var address = markers[i].getAttribute("address"); 
 
     var type = markers[i].getAttribute("type"); 
 
     var point = new google.maps.LatLng(
 
     parseFloat(markers[i].getAttribute("lat")), 
 
     parseFloat(markers[i].getAttribute("lng"))); 
 
     bounds.extend(point); 
 
     var html = "<b>" + name + "</b> <br/>" + address; 
 
     var icon = customIcons[type] || {}; 
 

 

 
     var marker = new google.maps.Marker({ 
 
      map: map, 
 
      position: point, 
 
      icon: icon.icon, 
 
      shadow: icon.shadow 
 
     }); 
 

 

 
     cluster.push(marker); 
 
     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
 
      return function (e) { 
 
       map.setZoom(17); 
 
       map.setCenter(marker.getPosition()); 
 
       infowindow.setContent("Nama Pelanggan : " + markers[i].getAttribute("name") + "<br/>" + 
 
        "Alamat Pelanggan : " + markers[i].getAttribute("address") + "<br/>" + 
 
        "Wilayah   : " + markers[i].getAttribute("type") + "<br/>" + 
 
        "coords:" + marker.getPosition().toUrlValue(6)); 
 

 
       infowindow.open(map, marker); 
 
      }; 
 
     })(marker, i)); 
 
     sidebarStr += "<a href='javascript:info("+(cluster.length-1)+");'>"+name+"</a><br/>"; 
 
     
 
    } 
 
    document.getElementById('sidebar').innerHTML = sidebarStr; 
 

 
    var a = 15; 
 
    var mc = new MarkerClusterer(map, cluster, { 
 
     maxZoom: 15 
 
    }); 
 
    map.fitBounds(bounds); 
 

 
    // }); 
 
} 
 

 

 
function downloadUrl(url, callback) { 
 
    var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; 
 

 
    request.onreadystatechange = function() { 
 
     if (request.readyState == 4) { 
 
      request.onreadystatechange = doNothing; 
 
      callback(request, request.status); 
 
     } 
 
    }; 
 

 
    request.open('GET', url, true); 
 
    request.send(null); 
 
} 
 

 

 

 
// google.maps.event.trigger(marker,'click'); 
 

 
function info(x) { 
 
    google.maps.event.trigger(cluster[x], 'click'); 
 
} 
 

 
function replaceAll(find, replace, str) { 
 
    return str.replace(new RegExp(find, 'g'), replace); 
 
} 
 

 
function get() { 
 
    var tempout; 
 
    $.post('tampil.php', { 
 
     ambil: frm.ambil.value 
 
    }, 
 

 
    function (output) { 
 

 
     var tampung = output.replace("[", ""); 
 
     tampung = tampung.replace("]", ""); 
 
     tampung = replaceAll('"', "", tampung); 
 
     var kode = tampung.split(","); 
 

 
     var latx = kode[3]; 
 
     var lngx = kode[4]; 
 

 
     load(latx, lngx, 17); 
 

 
     info(kode[0]); 
 

 

 
     $('#nama').html(output).show(); 
 
    } 
 

 
    ); 
 

 

 
} 
 

 

 

 
function doNothing() {} 
 

 
function parseXml(str) { 
 
    if (window.ActiveXObject) { 
 
     var doc = new ActiveXObject('MicrosoftXMLDOM'); 
 
     doc.loadXML(str); 
 
     return doc; 
 
    } else if (window.DOMParser) { 
 
     return (new DOMParser()).parseFromString(str, 'text/xml'); 
 
    } 
 
} 
 
var sampleXmlData = '<markers><marker name="Pan Africa Market" address="1521 1st Ave, Seattle, WA" lat="47.608940" lng="-122.340141" type="restaurant"/><marker name="Buddha Thai and Bar" address="2222 2nd Ave, Seattle, WA" lat="47.613590" lng="-122.344391" type="bar"/><marker name="The Melting Pot" address="14 Mercer St, Seattle, WA" lat="47.624561" lng="-122.356445" type="restaurant"/><marker name="Ipanema Grill" address="1225 1st Ave, Seattle, WA" lat="47.606365" lng="-122.337654" type="restaurant"/><marker name="Sake House" address="2230 1st Ave, Seattle, WA" lat="47.612823" lng="-122.345673" type="bar"/><marker name="Crab Pot" address="1301 Alaskan Way, Seattle, WA" lat="47.605961" lng="-122.340363" type="restaurant"/><marker name="Mama&apos;s Mexican Kitchen" address="2234 2nd Ave, Seattle, WA" lat="47.613976 " lng="-122.345467" type="bar"/><marker name="Wingdome" address="1416 E Olive Way, Seattle, WA" lat="47.617214" lng="-122.326584" type="bar"/><marker name="Piroshky Piroshky" address="1908 Pike pl, Seattle, WA" lat="47.610126" lng="-122.342834" type="restaurant"/></markers>';

html, body, #map_canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<form name="frm"> 
 
    <center> 
 
     <input type="text" id="ambil" name="ambil" value="" /> 
 
     <input type="button" id="Cari" value="Cari" onClick="get(); " /> 
 
     <br/> 
 
     <div id="nama"></div> 
 
    </center> 
 
<a href="#" onclick="info(6);">Open Info Window</a> 
 

 
</form> 
 
<div id="sidebar" style="width: 600px;"></div> 
 
<div id="map" style="width: 600px; height: 400px"></div>