Comment puis-je créer une API Google Map en utilisant v3 avec des marqueurs cliquables avec HTML personnalisé à l'intérieur du marqueur?

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

Question

J'ai une base de données complète des adresses et des photos de ces endroits. Note:. Je n'ai pas la latitude / longitude

Ce que je dois faire:

Ecrire une fonction qui utilise l'API Google v3 à la liste quelques-unes de ces adresses sur une carte Google, que lorsque vous cliquez sur le marqueur, il affiche l'adresse et l'image de la base de données. Ceci est un plugin pour une page, donc je ne peux pas modifier les données d'en-tête. Je ne peux insérer du code où il est affiché.

Je l'ai déjà lu dans la documentation, mais il semble que tout a beaucoup de code inutile et d'autres choses que mon geomap n'a pas besoin. Je cherche la solution la plus simple possible pour que je puisse ajouter plus tard si je veux.

Était-ce utile?

La solution

Cliquez sur le marqueur rouge sur la carte que je l'ai fait ici: http: / /www.dougglover.com/samples/UOITMap/index.html

Est-ce ce que vous cherchez?

Autres conseils

Peut-être que vous voulez essayer Gmapper ( http://sourceforge.net/projects/gmapper/) une belle classe php faire Google Maps. Il est un moyen simple de générer tous les javascript et il peut également rechercher des adresses. Sachez que Google limite le nombre de consultations pour les adresses, vous ne serez probablement pas en mesure de récupérer votre base de données en un jour.

Puis-je vous pointez sur un site que je l'ai fait à peu près exactement que (sauf qu'il met à jour lorsque vous placez un marqueur plutôt que de cliquer dessus, il suffit de déplacer le code dans l'événement clic vide fourni plutôt que l'événement de vol stationnaire). Dans l'esprit de codage réel, vous pouvez adapter, espérons-ce que je l'ai fait!

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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top