Wie erstelle ich eine Google -Karte mit V3 -API mit klickbaren Markierungen mit benutzerdefiniertem HTML im Marker?

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

Frage

Ich habe eine Datenbank voller Adressen und Bilder dieser Standorte. Hinweis: Ich habe nicht den Breitengrad / die Länge.

Was ich tun muss:

Schreiben Sie eine Funktion, die Google API V3 verwendet, um einige dieser Adressen auf einer Google -Karte aufzulisten. Wenn Sie auf den Marker klicken, wird die Adresse und das Bild aus der Datenbank angezeigt. Dies ist ein Plugin für eine Seite, daher kann ich die Header -Daten nicht bearbeiten. Ich kann nur Code einfügen, in dem er angezeigt wird.

Ich habe die Dokumentation bereits durchgelesen, aber es scheint, als hätte alles viele unnötige Code und Dinge, die mein Geomap nicht braucht. Ich suche die einfachste mögliche Lösung, damit ich sie später hinzufügen kann, wenn ich möchte.

War es hilfreich?

Lösung

Klicken Sie auf den roten Marker auf der Karte, die ich hier erstellt habe: http://www.dougglover.com/samples/uoitmap/index.html

Ist das um das, wonach Sie suchen?

Andere Tipps

Vielleicht möchten Sie GMapper (http://sourceforge.net/projects/gmapper/) Eine schöne PHP -Klasse, um Google Maps zu machen. Es ist eine einfache Möglichkeit, das gesamte JavaScript zu generieren, und es kann auch Adressen nachschlagen. Beachten Sie, dass Google die Anzahl der Nachschläge für Adressen einschränkt. Sie können Ihre DB wahrscheinlich nicht an einem Tag abrufen.

Kann ich Sie auf eine Website verweisen? Ich habe so ziemlich genau das getan (außer es aktualisiert, wenn Sie einen Marker bewegen, anstatt darauf zu klicken; verschieben Sie den Code einfach in das leere Klick -Ereignis und nicht auf das Schwebereignis). Im Geiste der echten Codierung können Sie hoffentlich das anpassen, was ich getan habe!

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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top