如何使用带有可点击标记的v3 API和标记内的自定义html创建Google Map？
[英]How do I create a Google Map using v3 API with clickable markers with custom html inside the marker?
问题描述
I have a database full of addresses and pictures of those locations. 
我有一个充满地址和这些位置图片的数据库。 Note: I do not have the latitude / longitude. 注意：我没有纬度/经度。
What I need to do: 我需要做什么：
Write a function that uses Google API v3 to list a few of these addresses on a Google map, that when you click on the marker, it displays the address and the picture from the database. 编写一个使用Google API v3在Google地图上列出其中一些地址的函数，当您单击标记时，它将显示地址和数据库中的图片。 This is a plugin for a page, so I cannot edit the header data. 这是页面的插件，因此我无法编辑标题数据。 I can only insert code where it is being displayed. 我只能在显示代码的地方插入代码。
I've already read through the documentation but it seems like everything has a lot of unnecessary code and stuff that my geomap doesn't need. 我已经阅读了文档，但似乎所有内容都包含很多不必要的代码和地理地图不需要的东西。 I'm looking for the simplest possible solution so that I can add to it later if I want to. 我正在寻找最简单的解决方案，以便以后可以添加。
4 个解决方案
解决方案1
1 2009-11-03 21:28:26
Maybe you want to try Gmapper ( http://sourceforge.net/projects/gmapper/ ) a nice php class to do Google Maps. 也许您想尝试使用Gmapper（ http://sourceforge.net/projects/gmapper/ ）一个不错的php类来制作Google Maps。 It's a simple way to generate all the javascript and it can also look up addresses. 这是生成所有JavaScript的简单方法，它还可以查找地址。 Be aware that Google limits the number of lookups for addresses, you probably won't be able to retrieve your db in one day. 请注意，Google限制了地址的查找次数，您可能将在一天内无法检索数据库。
解决方案2
1 2009-11-26 11:32:24
Can I point you at a site I did pretty much exactly that (except it updates when you hover a marker rather than click on it; just move the code into the empty click event provided rather than the hover event). 我能指出一个我做得差不多的网站吗（除了当您将标记悬停而不是单击时它会更新；只是将代码移到所提供的空单击事件而不是悬停事件中）。 In the spirit of real coding, hopefully you can adapt what I've done! 本着真正的编码精神，希望您能适应我所做的一切！
http://www.primrose-house.co.uk/localattractions http://www.primrose-house.co.uk/localattractions
解决方案3
1 已采纳 2010-05-05 13:39:47
Click on the red marker on the map I've made here: http://www.dougglover.com/samples/UOITMap/index.html 单击我在此处制作的地图上的红色标记： http : //www.dougglover.com/samples/UOITMap/index.html
Is that about what you're looking for? 那是您要找的东西吗？
解决方案4
1 2011-10-25 10:31:42
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 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.