Как создать карту Google, используя V3 API с кликабельными маркерами с пользовательским HTML внутри маркера?

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

Вопрос

У меня есть база данных, полная адресов и изображений этих мест. Примечание: у меня нет широты / долготы.

Что я должен сделать:

Напишите функцию, которая использует Google API V3, чтобы перечислить несколько из этих адресов на карте Google, что, когда вы нажимаете на маркер, он отображает адрес и изображение из базы данных. Это плагин для страницы, поэтому я не могу редактировать данные заголовка. Я могу вставить только код, где он отображается.

Я уже прочитал документацию, но, похоже, у всего есть много ненужного кода и прочего, в котором мой геомап не нужен. Я ищу самое простое решение, чтобы я мог добавить к нему позже, если захочу.

Это было полезно?

Решение

Нажмите на красный маркер на карте, которую я сделал здесь: http://www.dougglover.com/samples/uoitmap/index.html

Это то, что вы ищете?

Другие советы

Может, вы хотите попробовать Gmapper (http://sourceforge.net/projects/gmapper/) Хороший класс PHP, чтобы сделать карты Google. Это простой способ создать весь JavaScript, и он также может искать адреса. Имейте в виду, что Google ограничивает количество поисков для адресов, вы, вероятно, не сможете получить свой БД за один день.

Могу ли я указать вам на сайт, который я сделал практически на этом (за исключением того, что он обновляется, когда вы наведете маркер, а не нажимаете на него; просто переместите код в пустое событие щелчка, а не на событие Hover). В духе реального кодирования, надеюсь, вы сможете адаптировать то, что я сделал!

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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top