Untitled

<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script src="https://maps.googleapis.com/maps/api/js?key=Yourkey"></script>
  <link rel="stylesheet"href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script>

var gmap = null;
 $(document).on('pageshow','#map', drawMap );

function drawMap(){
 if (gmap == null){
 initialize(data,map); // 地図の初期化
 }
}

$(function(){
//JSONファイル読み込み開始
$.ajax({
 type: "POST",
 url:"json.php",
 cache:false,
 dataType:"json",
 success:function(json){
  var data=jsonRequest(json);
  initialize(data,map);
  }
 });
});

var currentInfoWindow = null;

// JSONファイル読み込みマーカーへデータ格納
function jsonRequest(json){
 var data=[];
 if(json.Marker){
  var n=json.Marker.length;
  for(var i=0;i<n;i++){
  data.push(json.Marker[i]);
  }
}
 return data;
}
//マーカー生成
 function createClickCallback(marker, infoWindow){
  return function(){
   if (currentInfoWindow){
    currentInfoWindow.close();
   }
  infoWindow.open(marker.getMap(), marker);
  currentInfoWindow = infoWindow;
 };
}

//現在地取得

navigator.geolocation.getCurrentPosition(succesCallback);
 function succesCallback(pos){
 var Position_latitude = pos.coords.latitude;
 var Position_longitude = pos.coords.longitude;
  //console.log(Position_latitude,Position_longitude);
 geo_location(Position_latitude,Position_longitude);
}

function geo_location(x,y){
 var bodyHeight = $('body').height();
 $("#map").css('height',bodyHeight);
  var opts={
   zoom: 16,
   center: new google.maps.LatLng(x,y),
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
 var map = new google.maps.Map(document.getElementById("map"),opts);
}
//地図生成
 function initialize(data,map){

  var i=data.length;
   while(i-- >0){
    var dat = data[i];
    var marker=new google.maps.Marker({
 position:new google.maps.LatLng(dat.lat,dat.lng),
 map:map
 });


 var infoWindow = new google.maps.InfoWindow({
  maxWidth: 250,
  content:'<div class="infoWindow">'+
         '<h2>'+dat.title+'</h2>'+
         '<span>'+dat.comment+'</span>'+
         '</div>'
  });
   google.maps.event.addListener(marker, 'click', createClickCallback(marker, infoWindow));

  }
 }

</script>
</head>

<body>
 <div data-role="page" id="top">
  <div data-role="header">
    <h1>DEMO</h1>
  </div>
 <div role="main" class="ui-content">
   <div id="map"></div>
 </div>

 <div data-role="footer">
   <div data-role="navbar" data-iconpos="bottom" class="navi_bar">
    <ul>
    <li class="ui-block-a"><a href="index.html" rel="external" data-icon="home" class="ui-btn-active ui-state-persist">Map</a></li>
    <li class="ui-block-b"><a href="sentpage.html" rel="external" data-icon="info">Info</a></li>
   </ul>
  </div>
  </div>
  </div>

 </body>

 <style type="text/css">
 #map {
 width: 100%;
 height: auto;
 }

 #infoWindow{
 width: 100%;
 height: auto;
 }
 </style>

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js" async></script>
    <script>
      window.addEventListener("load", function() {
        var currentInfoWindow = null;

        // JSONファイル読み込みマーカーへデータ格納
        function jsonRequest(json){
          var data=[];
          if(json.Marker){
            var n=json.Marker.length;
            for(var i=0;i<n;i++){
              data.push(json.Marker[i]);
            }
          }
          return data;
        }
        //マーカー生成
        function createClickCallback(marker, infoWindow){
          return function() {
            if (currentInfoWindow){
              currentInfoWindow.close();
            }
            infoWindow.open(marker.getMap(), marker);

            currentInfoWindow = infoWindow;
          };
        }

        //地図生成
        navigator.geolocation.getCurrentPosition(
          function geo_location(pos){
           var opts={
             zoom: 16,
             center: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
             mapTypeId: google.maps.MapTypeId.ROADMAP
          };

          var map = new google.maps.Map(document.getElementById("map"),opts);

          initialize(map, [
            {
              lat: pos.coords.latitude - pos.coords.latitude/100000,
              lng: pos.coords.longitude - pos.coords.latitude/100000,
              title: "marker 1",
              comment: "marker 1"
            },
            {
              lat: pos.coords.latitude + pos.coords.latitude/100000,
              lng: pos.coords.longitude + pos.coords.longitude/100000,
              title: "marker 2",
              comment: "marker 2"
            }
          ])
        });

        function initialize(map, data){
          var i=data.length;
          while(i-- >0){
            var dat = data[i];
            var marker=new google.maps.Marker({
              position:new google.maps.LatLng(dat.lat,dat.lng),
              map: map
            });


            var infoWindow = new google.maps.InfoWindow({
              maxWidth: 250,
              content:'<div class="infoWindow">'+
                 '<h2>'+dat.title+'</h2>'+
                 '<span>'+dat.comment+'</span>'+
                 '</div>'
             });
             google.maps.event.addListener(marker, 'click', createClickCallback(marker, infoWindow));
           }

         }
      }, false);
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>