Adicionar endereço no infowindow do GoogleMaps

rdpacato · Outubro 23, 2013

Pessoal,

Como faço para adicionar o endereço no infowindow quando clica no marcador?

Como passo vários marcadores só consegui mandar a "info" que já vem do BD.

Eu precisava adicionar o endereço e também o endereço na tela (vou usar o jstl) minha dificuldade é converter as coordenadas para isso.

Segue minhas funções que Criam pontos no mapa:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@page isELIgnored ="false" %>  
    <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>  
     
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html> 
<head> 
<title>TESTE2</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;


function createMarker(point,info,map) {
    var iconURL = 'img/p.png';				
    var iconSize = new google.maps.Size(32,34);
    var iconOrigin = new google.maps.Point(0,0);	
    var iconAnchor = new google.maps.Point(15,30);
 
    var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);
 
 
    var iconShape = [8,33, 4,15, 1,15, 0,12, 0,5, 6,0, 12,0, 19,14, 15,15, 10,33];
    var myMarkerShape = {
      coord: iconShape,
      type: 'poly'
    };

    //PARA SETAR IMAGEM DO MARCADOR, DESCOMENTAR		
    var marker = new google.maps.Marker({
      position : point,
      html : info,
      map : map,
	  shape: myMarkerShape,
 	  icon: myIcon
   /* shadow: myShadow,  */
    });

    var infowindow = new google.maps.InfoWindow({
        content: info,
       
    });
    
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,this);
      });
   
  }

function createMarkerStart(point,info,map) {
    var iconURL = 'img/casa.png';				
    var iconSize = new google.maps.Size(50,50);
    var iconOrigin = new google.maps.Point(0,0);	
    var iconAnchor = new google.maps.Point(15,30);
 
    var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);
 
    var iconShape = [8,33, 4,15, 1,15, 0,12, 0,5, 6,0, 12,0, 19,14, 15,15, 10,33];
    var myMarkerShape = {
      coord: iconShape,
      type: 'poly'
    };
		
    var marker = new google.maps.Marker({
      position : point,
      html : info,
      map : map,
	  shape: myMarkerShape,
 	  icon: myIcon
    });

  }
  
function createMarkerEnd(point,info,map) {
    var iconURL = 'img/d2.png';				
    var iconSize = new google.maps.Size(45,45);
    var iconOrigin = new google.maps.Point(0,0);	
    var iconAnchor = new google.maps.Point(15,30);
 
    var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);
 
    var iconShape = [8,33, 4,15, 1,15, 0,12, 0,5, 6,0, 12,0, 19,14, 15,15, 10,33];
    var myMarkerShape = {
      coord: iconShape,
      type: 'poly'
    };
		
    var marker = new google.maps.Marker({
      position : point,
      html : info,
      map : map,
	  shape: myMarkerShape,
 	  icon: myIcon
    });

  }
  

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(-23.521182,-46.63559);
  var mapOptions = {
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  
}

function calcRoute() {
	var myTrip=[];
	
	var start;
    var end;
	    <c:forEach var="listaCoord" varStatus="status" items="${listaCoord}">
	    								
			var cod = '${listaCoord.codDaf}';
			var lat = '${listaCoord.idLatitude}';
			var lng = '${listaCoord.idLongitude}';

			var pt = new google.maps.LatLng(lat, lng);    
			myTrip.push(pt);
			
	        <c:if test="${status.first}">
	    		//start = pt;
	    		createMarkerStart(pt,cod,map);
	        </c:if> 
	        
	        <c:if test="${status.last}">  
	    		//end = pt;
	    		createMarkerEnd(pt,cod,map);
	        </c:if>
	        createMarker(pt,cod,map);
	        
	    </c:forEach>

	    var flightPath = new google.maps.Polyline({
	    	   path:myTrip,
	    	   strokeColor:"#0000FF",
	    	   strokeOpacity:0.5,
	    	   strokeWeight:4
	    	 });

	    flightPath.setMap(map);
	    
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body onload="calcRoute()">
    <div id="map-canvas" style="float:left;width:70%;height:100%;"></div>
    <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
    
    <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
    </div>
  </body>
</html>

rdpacato · Outubro 24, 2013

Consegui adicionar o endereço... com a função abaixo... só que... só mostra do último registro... e não de todas os marcadores... pois deixo um loop lendo as coordenadas, e as envio para a função para criar os marcadores... só que ao adaptar a função para criar junto com o marcador, está só colocando no último e não em todos:

function createMarker(point,info,map,lat,lng) {
    var iconURL = 'img/pata.png';				
    var iconSize = new google.maps.Size(32,34);
    var iconOrigin = new google.maps.Point(0,0);	
    var iconAnchor = new google.maps.Point(15,30);
 
    var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);

    var geocoder = new google.maps.Geocoder;

    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (results[1]) {
            map.setZoom(11);
            var marker = new google.maps.Marker({
                position : point,
                html : info,
                map : map,
           	  icon: myIcon
              });
            var infowindow = new google.maps.InfoWindow({
            content: "Dispositivo: " + info + "<br> Endereço: " + results[1].formatted_address
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,this);
              });
          }
        } else {
          alert("Geocoder failed due to: " + status);
        }
      });
}

rdpacato · Outubro 25, 2013

Consegui:

google.maps.event.addListener(marker, 'click', function() {

endereco(info,this.position);

infowindow.open(map,this);

});


function endereco(info,point){

var geocoder = new google.maps.Geocoder();

geocoder.geocode({'latLng': point}, function(results, status){

if (status == google.maps.GeocoderStatus.OK){

infowindow.setContent('<b>Coordenadas: </b>' + point + '<br><b>Dispositivo:</b> ' + info + '<br><b>Endereço: </b>' + results[0].formatted_address);

} else {


}

});

}

Entrar

Arquivado

Adicionar endereço no infowindow do GoogleMaps

Recommended Posts

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante