Come faccio a creare una Google Map v3 utilizzando API con marcatori cliccabili con HTML personalizzato all'interno del marcatore?

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

Domanda

Ho un database completo di indirizzi e le immagini di quei luoghi. Nota:. Non ho la latitudine / longitudine

Che cosa devo fare:

Scrivere una funzione che utilizza Google API v3 per elencare alcuni di questi indirizzi su una mappa di Google, che, quando si fa clic sul marcatore, si visualizza l'indirizzo e l'immagine dal database. Questo è un plugin per una pagina, quindi non posso modificare i dati di intestazione. Posso inserire il codice solo dove viene visualizzato.

Ho già letto attraverso la documentazione, ma sembra che ogni cosa ha un sacco di codice inutile e cose che la mia Geomap non ha bisogno. Sto cercando la soluzione più semplice possibile, in modo che posso aggiungere in un secondo momento, se voglio.

È stato utile?

Soluzione

Clicca sul marcatore rosso sulla mappa che ho fatto qui: http: / /www.dougglover.com/samples/UOITMap/index.html

E 'questo quello che stai cercando?

Altri suggerimenti

Forse si vuole provare Gmapper ( http://sourceforge.net/projects/gmapper/) una bella classe PHP per fare Google Maps. E 'un modo semplice per generare tutti i javascript e si può anche cercare gli indirizzi. Essere consapevoli del fatto che Google limita il numero di ricerche per gli indirizzi, probabilmente non sarà in grado di recuperare il db in un giorno.

Posso puntare a un sito che ho fatto più o meno esattamente che (tranne che aggiorna quando si posiziona un marcatore invece di clic su di esso, basta spostare il codice nell'evento click vuoto a condizione, piuttosto che l'evento hover). Nello spirito di vera e propria codifica, si spera si può adattare quello che ho fatto!

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

    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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top