 |
|
อยากสอบถามหน่อยครับพอดีผมจะทำปุ่ม popup เวลาผู้ใช้มากดIcon location ให้ขึ้นแสดง google map ต้องทำยังไงครับ พอดีเขียน code map api แล้ว ไปดูจาก https://www.thaicreate.com/community/googlemap-popup-jquery-ui-dialog.html ไปไม่ถูกเลยอะครับ ลองแก้แล้วแก้อีกก็ยังไม่ได้
Code map Code (PHP)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto location</title>
<style type="text/css">
html { height: 100% }
body {
height:100%;
margin:0;padding:0;
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
}
#map_canvas {
height:550px;
width:550px;
margin:auto;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var map;
var GGM;
function initialize() {
GGM=new Object(google.maps);
var my_Latlng = new GGM.LatLng(13.761728449950002,100.6527900695800);
var my_mapTypeId=GGM.MapTypeId.ROADMAP;
var my_DivObj=$("#map_canvas")[0];
var myOptions = {
zoom: 13,
center: my_Latlng ,
mapTypeId:my_mapTypeId
};
map = new GGM.Map(my_DivObj,myOptions);
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
var pos = new GGM.LatLng(position.coords.latitude,position.coords.longitude);
var infowindow = new GGM.InfoWindow({
map: map,
position: pos,
content: 'คุณอยู่ที่นี่.'
});
var my_Point = infowindow.getPosition();
map.panTo(my_Point);
$("#lat_value").val(my_Point.lat()); e
$("#lon_value").val(my_Point.lng());
$("#zoom_value").val(map.getZoom());
map.setCenter(pos);
},function() {
});
}else{
}
GGM.event.addListener(map, 'zoom_changed', function() {
$("#zoom_value").val(map.getZoom());
});
}
$(function(){
$("<script/>", {
"type": "text/javascript",
src: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize&key=AIzaSyBAnfC9zsz0xTskHyuJV1Mmr1mTNsM4tjE"
}).appendTo("body");
});
</script>
</body>
</html>
Tag : PHP, JavaScript, jQuery
|
|
 |
 |
 |
 |
Date :
2018-01-21 13:46:46 |
By :
aunpun01 |
View :
666 |
Reply :
3 |
|
 |
 |
 |
 |
|
|
|
 |