Open Google map in Jquery

Question

i have 3 pages, one is html that show data from php page, and php page that process data and get data from data base, the last one is js page.

my problem is i have Google map code in php page, and i wont to print it in html page.

now i send it by jquery and open it in html page, but it is not work ??? why.

if i copy code from php page and past it in html page, the Google map will be open... so where is problem ?

<style>
      #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style><script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script>
    <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(24.701564296830245,46.76211117183027);
  var mapOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
<div id='map-canvas'></div>

Answer 1

This is an example of "how you can send above code for map from php page to html page by jquery."

PHP (map.php):

<?php
echo "
<div id='map-canvas' style='height: 100%; margin: 0px; padding: 0px'></div>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script>
<script>
function initialize() {
  var myLatlng = new google.maps.LatLng(24.701564296830245,46.76211117183027);
  var mapOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>";
?>

I changed the above code briefly after posting because I wasn't sure how the browser would parse the <style> within the <body> asynchronously. I also moved the div#map-canvas above before the <script> so the HTML will be present before the script executes.

HTML page:

<head>
<script>
$.ajax({
  url: "map.php",
})
.done(function( msg ) {
  $('#where_map_is_going').html(msg);
});
</script>
</head>
<body>
<div id="where_map_is_going"></div>

Open Google map in Jquery

Question

1 answers

solution1
0 2013-10-31 22:38:31

Open Google map in Jquery

Question

1 answers

solution1 0 2013-10-31 22:38:31

solution1
0 2013-10-31 22:38:31