[問題] google map api
小弟剛開始接觸google map api
有一個問題想請教各位高手
不知道方不方便
我現在google map api 可以搜尋位置並且打出紅色點點
現在要加上一個對話框
我也做了另外一個網頁(程式碼在下方)
原本的程式碼是
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>sample</title>
<script type="text/javascript"
src="" rel="nofollow">http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " +
status);
}
});
}
</script>
</head>
<body onload="initialize()">
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map_canvas" style="height:500px;top:30px"></div>
</body>
</html>
現在要加上一個對話框
我也做了另外一個網頁
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Info Window Simple</title>
<link
href="http://code.google.com/apis/maps/documentation/javascript/examples/defau\
lt.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="" rel="nofollow">http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(25.242,121.3315599);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
請問兩個function要怎麼整合在一起呢?
謝謝!!
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 111.240.233.151
討論串 (同標題文章)
完整討論串 (本文為第 2 之 2 篇)：