JQuery отображение JSon URL

Question

я написал код, чтобы показать карту маркер, но я хочу, чтобы загрузить карту маркер Lat, длинное значение от сервера URL

для например: http://socialdeal4u.com/test2.php

ниже мой код

код расслоение плотной:

var map; 
    function initMap() { 
     var myLatLng = { lat: '39.539429069523', lng: '3.3304989337921' }; 
     var myOptions = { 
      zoom: 8, 
      center: myLatLng 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'), 
      myOptions); 

     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      title: 'name here' 
     }); 

    } 
    // google.maps.event.addDomListener(window, 'load', initMap); 

    function showmap(){ 
     console.log('hii'); 
     setTimeout(function(){ 
      initMap(); 
     }, 20); 
     google.maps.event.trigger(map, 'resize'); 
    } 

Html код

<ul id="tabs" class="nav nav-tabs col-md-12" data-tabs="tabs"> 
          <li class="active"><a href="#tab-red" data-toggle="tab" aria-expanded="true" id="htl">Tab 1</a></li> 
          <li class="mpatatta"><a href="#tab-map" data-toggle="tab" aria-expanded="true" onclick="showmap();">Map</a></li> 

</ul> 
<div id="my-tab-content" class="tab-content"> 
    <div class="tab-pane active" id="tab-red"> 
     tab one 
    </div> 
    <div class="tab-pane" id="tab-map"> 
     <div id="map_canvas"></div> 
    </div> 
</div> 

Answer 1

Я реализую это таким образом. Я удалил из моего кода дополнительные требования, которые вам не нужны. Если что-нибудь, что вы хотите, чтобы я объяснил, прокомментируйте. PHP часть короткий код. Используйте свой запрос для захвата переменной lat, long и through loop.

$lat_long = ''; 
//loop goes here 
$lat_long .= "[''," . $result['latitude'] . "," . $result['longitude'] . "]"; 
$returnArray = array("lat_long" => $lat_long, "result"=> $total_result); 
echo json_encode($returnArray); 

Javascript часть, в которой вы будете получать JSON и сохранять его в глобальных переменных «местоположения».

var mapOptions, mapcenter, bounds; 
var zoomLevel = 0; 
var LatLngList,locations,mapcenter_lat,mapcenter_lng; 
var marker; 

function initialize() { 
    bounds = new google.maps.LatLngBounds(); 

    if (locations.length > 1) { 
     for (var i = 0; i < locations.length; i++) { 
      LatLngList[i] = new google.maps.LatLng(locations[i][1], locations[i][2]); 
      bounds.extend(LatLngList[i]); 
     } 
    } 
    else { 
     zoomLevel = 13; 
    } 

    mapcenter = new google.maps.LatLng(mapcenter_lat, mapcenter_lng); 
    mapOptions = new google.maps.Map(document.getElementById('home_map'), { 
     zoom: zoomLevel, 
     center: mapcenter, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    loadMarkers(); 
    if (locations.length > 1) { 
     mapOptions.fitBounds(bounds); 
    } 
} 

//------------------------------map---------------------------------------- 


$.post("php file",{variables}, function(data){ 

    var result = JSON.parse(data); 
     if(result.result != 0){ 


      LatLngList = new Array(); 
      locations = eval("["+result.lat_long+"]"); 
      mapcenter_lat =result.lat; 
      mapcenter_lng = result.lng; 


      if(!window.google||!window.google.maps){ 
      var script = document.createElement('script'); 
      script.type = 'text/javascript'; 
      script.id = 'googleMaps'; 
      script.src = 'https://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize'; 
      document.body.appendChild(script); 
      } 
      else{initialize();} 
     } 
}); 


//Load markers 
function loadMarkers(){ 

    var i; 
    var myMarkers = []; 
    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: mapOptions, 
      icon: '/images/Custome Marker Image.png', 
      animation: google.maps.Animation.DROP, 
      size: new google.maps.Size(5, 5) 
     }); 
    } 
} 

Answer 2

Одним из вариантов является использование JQuery.getJSON

proof of concept fiddle

фрагмент кода:

var map; 
 

 
function initMap(data) { 
 
    var myLatLng = { 
 
     lat: data.lat, 
 
     lng: data.lon 
 
    }; 
 
    var myOptions = { 
 
     zoom: 8, 
 
     center: myLatLng 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map_canvas'), 
 
    myOptions); 
 

 
    var marker = new google.maps.Marker({ 
 
     position: myLatLng, 
 
     map: map, 
 
     title: data.hotelname 
 
    }); 
 

 
} 
 
google.maps.event.addDomListener(window, 'load', function() { 
 
    $.getJSON("http://socialdeal4u.com/test2.php", initMap); 
 
});

html, body, #map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>