¿Cómo creo un mapa de Google usando la API V3 con marcadores haciendo clic con HTML personalizado dentro del marcador?

StackOverflow https://stackoverflow.com/questions/1670202

Pregunta

Tengo una base de datos llena de direcciones e imágenes de esas ubicaciones. Nota: No tengo la latitud / longitud.

Lo que necesito hacer:

Escriba una función que use Google API V3 para enumerar algunas de estas direcciones en un mapa de Google, que cuando hace clic en el marcador, muestra la dirección y la imagen de la base de datos. Este es un complemento para una página, por lo que no puedo editar los datos del encabezado. Solo puedo insertar código donde se muestra.

Ya he leído la documentación, pero parece que todo tiene mucho código innecesario y cosas que mi geomap no necesita. Estoy buscando la solución más simple posible para poder agregarla más tarde si quiero.

¿Fue útil?

Solución

Haga clic en el marcador rojo en el mapa que he hecho aquí: http://www.dougglover.com/samples/uoitmap/index.html

¿Es eso de lo que estás buscando?

Otros consejos

Tal vez quieras probar gmapper (http://sourceforge.net/projects/gmapper/) Una buena clase de PHP para hacer Google Maps. Es una forma simple de generar todo el JavaScript y también puede buscar direcciones. Tenga en cuenta que Google limita la cantidad de búsqueda para direcciones, probablemente no pueda recuperar su DB en un día.

¿Puedo señalarlo en un sitio? Hice prácticamente exactamente eso (excepto que se actualiza cuando pasa un marcador en lugar de hacer clic en él; simplemente mueva el código al evento de clic vacío proporcionado en lugar del evento flotante). En el espíritu de la codificación real, ¡espero que puedas adaptar lo que he hecho!

http://www.primrose-house.co.uk/localattracciones

    Here is the full html with google map api v3, markers will be create on dragging the route and then each marker having custom html inside the infowindow.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var rendererOptions = {
  draggable: true,
  suppressInfoWindows: true
  };
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();
var infowindow = new google.maps.InfoWindow();
var map;
var total;
var waypoint_markers = []

var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(46.87916, -3.32910),
    mapTypeId: 'terrain'
};
var markers = [];

function init() {
  map = new google.maps.Map(document.getElementById('map'),{'mapTypeId': google.maps.MapTypeId.ROADMAP});

  directionsDisplay.setMap(map);
  //directionsDisplay.setPanel($("#directionsPanel")[0]);

  google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    watch_waypoints();
  });
  calcRoute(false);
}

function calcRoute(waypoints) {
  var selectedMode = "DRIVING"; //document.getElementById("mode").value;
  var ary;
  if(waypoints) {
    ary = waypoints.map(function(wpt) {return {location: wpt, stopover: false};});
  } else {
    ary = [];
  }

  var request = {
    origin: "Seattle, WA",
    destination: "Portland, OR",
    waypoints: ary,
    travelMode: google.maps.TravelMode[selectedMode],
    unitSystem: google.maps.UnitSystem["IMPERIAL"]
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

function watch_waypoints() {
  clear_markers();
  var wpts = directionsDisplay.directions.routes[0].legs[0].via_waypoints;
  for(var i=0; i<wpts.length; i++) {
    var marker = new google.maps.Marker({
        map: map,
        //icon: "/images/blue_dot.png",
        position: new google.maps.LatLng(wpts[i].lat(), wpts[i].lng()),
        title: i.toString(),
        draggable :true
        });
    waypoint_markers.push(marker);
    var infowindow = new google.maps.InfoWindow({ 
    content: "<table>" +
    "<tr><td>Waypoint:</td> <td><input type='text' id='name' value=''/> </td> </tr>" +
    "<tr><td>Waypoint Description:</td> <td><input type='text' id='address' value=''/></td> </tr>" +
    "<tr><td><input type='hidden' value='"+marker.getPosition()+"'id='hiddenval'></td></tr>"+
    "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData(<?php print_r(node_load(arg(1))->nid);?>)'/></td></tr>"
});
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);

    });
    google.maps.event.addListener(marker, 'dblclick', function() {
        marker.setMap(null);
        wpts.splice(parseInt(this.title), 1);
        calcRoute(wpts);
        directionsDisplay.setOptions({ preserveViewport: true, draggable: true});
    });
  }
}
function clear_markers() {
  for(var i=0; i<waypoint_markers.length; i++){
    waypoint_markers[i].setMap(null);
  }
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body onload="init()">
<div id="directionsPanel"></div>
<div id="map"></div>
</body>
</html>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top