1. Accueil
  2. Question et réponse
  3. Intégration de Google street view à l'intérieur du marqueur

Intégration de Google street view à l'intérieur du marqueur

2009-11-16 4 views
3

Lorsque nous recherchons des adresses sur le site Web Google Maps, si la vue de la rue est disponible pour cette adresse, son marqueur ajoute une petite image avec un lien pour afficher Street View pour cette zone.Intégration de Google street view à l'intérieur du marqueur

Ma question est, puis-je intégrer une telle chose avec ma carte personnalisée?

Un exemple serait:

http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=30+Daniel+Webster+Hwy,+East+Merrimack,+NH+03054&sll=35.101934,-95.712891&sspn=48.649293,93.076172&ie=UTF8&hq=&hnear=30+Daniel+Webster+Hwy,+East+Merrimack,+Hillsborough,+New+Hampshire+03054&z=16

Vérifiez le marqueur - Je veux quelque chose comme ça;

Cordialement,

PS: Je sais qu'il doit y avoir un moyen, mais je suis très peu de temps; besoin d'une solution dès que possible - avoir googlé, mais n'ont pas trouvé moyen de sortir.

Source

2009-11-16 effkay

+1

Je ne pouvais pas trouver ces informations dans le Guide du développeur Google Maps, mais il y a une solution simple à ce à http://blog.mridey.com/2010/11/how-to-embed- streetview-in-infowindow.html. –

Répondre

3

Well; Enfin, j'ai été capable de le faire - mais pas exactement 100% dupliqué de google maps.

Voici le code - l'affichage juste pour référence future pour les autres:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=KEY" type="text/javascript"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    var map; 
    var geocoder; 

    function load() 
    { 
     if (GBrowserIsCompatible()) 
     { 
      map = new GMap2(document.getElementById("map")); 
      map.setCenter(new GLatLng(40, -80), 1); 
      map.addControl(new GLargeMapControl()); 
      map.addControl(new GMapTypeControl()); 
      map.setZoom(14); 

      geocoder = new GClientGeocoder(); 
      geocoder.getLocations("<%=me.Address %>", addAddressToMap); 
     } 
    } 

    function addAddressToMap(response) 
    { 
     if (!response || response.Status.code != 200) 
     { 
      alert("Sorry, we were unable to geocode that address"); 
      return; 
     } 

     place = response.Placemark[0]; 
     point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]); 

     var lat = place.Point.coordinates[1]; 
     var lng = place.Point.coordinates[0]; 

     var letter = String.fromCharCode("A".charCodeAt(0)); 

     var baseIcon = new GIcon(); 
     baseIcon.iconSize = new GSize(32, 32); 
     baseIcon.shadowSize = new GSize(37, 34); 
     baseIcon.iconAnchor = new GPoint(9, 34); 
     baseIcon.infoWindowAnchor = new GPoint(9, 2); 
     baseIcon.infoShadowAnchor = new GPoint(18, 25); 

     marker = new GMarker(point); 

     map.addOverlay(marker); 
     map.panTo(point); 
     marker.openInfoWindowHtml("<strong><%=me.Name %></strong><br /><%=me.AddressForDisplay %>"); 

     var point = new GLatLng(lat, lng); 
     panoramaOptions = { latlng:point }; 
     pano = new GStreetviewPanorama(document.getElementById("streetview"), panoramaOptions); 

     GEvent.addListener(pano); 
     GEvent.addListener(pano, "error", handleNoFlash); 
    } 
    function handleNoFlash(code) 
    { 
     if (code == GStreetviewPanorama.ErrorValues.FLASH_UNAVAILABLE) 
      alert('You need flash player to view the panorama.'); 

     document.getElementById("toggle").style.display = 'none'; 
    } 
    function Toggle() 
    { 
     if(document.getElementById("streetview").style.display == 'none') 
     { 
      document.getElementById("streetview").style.display = 'block'; 
      document.getElementById("map").style.display = 'none' 
      document.getElementById("toggle").innerHTML = "<a href='javascript:Toggle();'>Map View</a>"; 
     } 
     else 
     { 
      document.getElementById("map").style.display = 'block'; 
      document.getElementById("streetview").style.display = 'none' 
      document.getElementById("toggle").innerHTML = "<a href='javascript:Toggle();'>Street View</a>"; 
     } 
    } 
    //]]> 
</script>

Et pour le corps:

<body onload="load()" onunload="GUnload()"> 
     <div id="toggle"><a href='javascript:Toggle();'>Street View</a></div> 
     <div id="map" style="width:650px; height: 400px;"></div> 
     <div id="streetview" style="width:650px; height: 400px; display:none;"></div>

Source

2009-11-17 12:58:29 effkay

1

Pour découvrir si un Streetview existe, utilisez GStreetviewClient.getNearestPanorama(). Votre callback ne recevra qu'un code d'état 200 si vous en trouvez un à proximité.

L'affichage de Streetview dans une infowindow est maintenant compliqué par le fait que le code infowindow a été retiré du code principal dans un module externe. Cela signifie qu'il peut y avoir un délai important avant que le contenu de l'infowindow ne soit ajouté au DOM, et GStreetviewPanorama s'attend à ce que le conteneur soit déjà dans le DOM. L'astuce dans la seconde moitié de this page peut fonctionner, ou vous devrez peut-être ajouter votre propre code pour attendre que la cible div devienne accessible avant d'appeler GStreetviewPanorama.

Source

2009-11-17 08:03:12

Questions connexes

 Questions connexes