나는 해당 위치의 주소와 그림으로 가득 찬 데이터베이스를 가지고 있습니다. 참고 : 위도/경도가 없습니다.마커 내부에 맞춤 html이있는 클릭 가능한 마커가있는 v3 API를 사용하여 Google지도를 만들려면 어떻게해야합니까?
내가해야 할 일은 :
당신이 마커를 클릭하면이 주소와 사진에서 표시되는지, 구글지도에이 주소의 몇 가지를 나열하는 구글 API v3의를 사용하는 함수를 작성 데이터베이스 이것은 페이지의 플러그인이므로 헤더 데이터를 편집 할 수 없습니다. 표시되는 코드 만 삽입 할 수 있습니다.
필자는 이미 문서를 읽었지만 모든 것이 불필요한 코드와 물건이 많아서 내 geomap에 필요하지 않은 것처럼 보입니다. 나는 가능한 한 가장 간단한 솔루션을 찾고 있으므로 나중에 추가 할 수 있습니다.
클릭 여기했습니다 :
http://www.dougglover.com/samples/UOITMap/index.html 당신을 위해 무엇을 찾고있는 사람에 대해인가요?
Google지도를 할 수있는 멋진 PHP 클래스 인 Gmapper (http://sourceforge.net/projects/gmapper/)를 사용하고 싶을 것입니다. 모든 자바 스크립트를 생성하는 간단한 방법이며 주소를 찾을 수도 있습니다. Google에서는 주소 조회 수를 제한하므로 하루 동안 데이터베이스를 검색 할 수 없을 것입니다.
마커를 가리 키지 않고 마커를 가리키면 코드가 마우 스 이벤트가 아니라 빈 클릭 이벤트로 옮겨 지므로 업데이트를 제외하고 정확하게 사이트를 가리킬 수 있습니까? 실제 코딩의 정신으로 바라건대 내가 한 것을 적응시킬 수 있습니다! 지도에서 빨간색 마커에
지도가 보이지 않습니다. – Citizen
"지도의 어트랙트를 보려면 여기를 클릭하십시오"링크를 클릭하십시오 :) 미안지도가 기본이 아닌 맵 동작으로 변경되었습니다. :) –
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>
링크가 작동하지 않습니다. –