How to call Php file using javascript

Question

I am currently doing a Google Map as of the moment. I don't have any PhP file, all I have is my HTML Java Script My problem is, When I click or hover my marker there will be a Pop out message there the InforMessage, What really need to do is, I want to make a PHP file so and the inside of the php file will be transfer to that InfoMessage on the marker. And the inside of the php file is 1 or 2 Image then the following description. Here is my PHP and Java Scrip Codes:

you can edit it, sorry in advance I am just getting to used PHP JS :)

=HTML=

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/jav.js"></script>
</head>
<body>
    <div id="map"></div>
        <!--<script src="https://maps.googleapis.com/maps/api/js"
         async defer></script>-->
         <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>

</body>
</html>

=Javascript=

  function initMap() {
  var myLatLng = {lat: 18.2050, lng: 120.7920};
  var laoagLatLng = {lat: 18.196257 , lng: 120.593041};
  var locations = [   
      {name:"Bangui", lat:18.509124, lng:120.748283},
      {name:"Batac", lat: 18.045672, lng:120.592285},
      {name:"Burgos", lat:18.474150, lng:120.615543},
      {name:"Laoag City", lat: 18.196379, lng: 120.594239},  
      {name:"Marcos", lat:18.032340, lng:120.709952},
      {name:"Pagudpud", lat:18.563691, lng:120.872484},
      {name:"Paoay", lat:18.074607, lng:120.516002},
      {name:"Pasuquin", lat:18.409917, lng:120.619044},
      ];

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: myLatLng,
  });

   for (i = 0; i < locations.length; i++) {

   var marker = new google.maps.Marker({
    position: locations[i],
    icon: 'img/muni.png',
    map: map,
    title: locations[i].name 
  });

  marker.setMap(myLatLng);
  }

}

Thanks you in advance

@CodeGodie Sorry Im still working on it, I still don't know :) It is still a idea that I have been thinking, What bugs me how to implement it I don't know what to code :) — SPILWERS, May 18 '16 at 14:34
Learn the basics: http://stackoverflow.com/questions/9436534/ajax-tutorial-for-post-and-get — CodeGodie, May 18 '16 at 14:39
@SPILWERS : What are you really trying to do it's confusing..I do know that it can be done through AJAX but can you describe your question in simple words without the use of code words so may be I will post an answer to your question then..! — Umair Shah, May 18 '16 at 14:47
@UmairShahYousafzai what I am trying to accomplish how to call a php/html file with the use of Infomessage in google maps. — SPILWERS, May 18 '16 at 15:01
@SPILWERS : You mean you want to mark a point on map and also add info message with it when someone click on the marker so it will show the infomessage as in : https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple — Umair Shah, May 18 '16 at 15:26

score 0 · Accepted Answer · answered May 19 '16 at 09:45

Use this code and make some changes if not working.

function initAutocomplete() {
  var latlng = new google.maps.LatLng(19.0213, 72.8424);
  document.getElementById('pac-input').value='Dadar, Mumbai, Maharashtra, India';
  var map = new google.maps.Map(document.getElementById('map'), {
    //center: {lat: 22.717950, lng: 75.884679},
    center: latlng,
    zoom: 17,
    mapTypeId: google.maps.MapTypeId.HYBRID
  });

  // Create the search box and link it to the UI element.
  var input = document.getElementById('pac-input');
  var searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  // Bias the SearchBox results towards current map's viewport.
  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });
console.log(google.maps.ControlPosition);
  //var markers = [];
  // [START region_getplaces]
  // Listen for the event fired when the user selects a prediction and retrieve
  // more details for that place.
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();
     console.log(places.length);
    if (places.length == 0) {
      return;
    }

    //markers = [];
     var marker;
    // For each place, get the icon, name and location.
    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place) {
      var icon = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };


  marker = new google.maps.Marker({
    position: place.geometry.location,
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    icon: 'red-icon-50.png',
    title: place.name
  });
    google.maps.event.addListener(marker, 'dragend', function(a) {
        console.log(a);

        document.getElementById("lat").value= a.latLng.lat();
        document.getElementById("lng").value= a.latLng.lng();

    });


      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });

    map.fitBounds(bounds);
  });
    var address = document.getElementById('pac-input').value;
    if(address != ''){
      var marker = new google.maps.Marker({
          position: latlng,
          map: map,
          animation: google.maps.Animation.DROP,
          icon: 'red-icon-50.png',
          draggable: true
        });
          google.maps.event.addListener(marker, 'dragend', function(a) {
        console.log(a);

        document.getElementById("lat").value= a.latLng.lat();
        document.getElementById("lng").value= a.latLng.lng();
    });
           marker.id = 1;
           poilon=document.getElementById("lng").value;
           poilat=document.getElementById("lat").value;
          google.maps.event.addListener(marker, "click", function (e) {
              var markerinfopopup = "<b>Point of Interest #"+marker.id+"</b><div><br /><textarea id=\"poi"+marker.id+"\" placeholder=\"Details\" value=\"\"></textarea><br /><p><div class=\"gef\"><button class=\"btncol\" onclick=\"saveInfoPoi('"+marker.id+"','"+poilat+"','"+poilon+"')\">Save</button><button class=\"btncol\" onclick = 'DeleteMarker(" + marker.id + ");' value = 'Delete'>Delete</button></div></p></div>";
              var infoWindow1 = new google.maps.InfoWindow({
              content: markerinfopopup 
              });
                prev_infowindow2=infoWindow1;
                infoWindow1.open(map, marker);            
          });
    }

}

    function saveInfoPoi(ids,poi_lat,poi_lon)
            {
                var poiids="poi"+ids;
                var descs=document.getElementById(poiids).value;
                 console.log(descs);
                var poiLatLon="("+poi_lat+","+poi_lon+")";
                var param = {poiinfowindowid: ids, clat:mlat,clon:mlong, poidescription: descs,poilatlon:poiLatLon};

                $.ajax({
                url: "<?php echo $ajax; ?>",
                type: "post",
                data: param ,
                success: function (response) {
                  var su=JSON.parse(response);
                  console.log(su);
                  prev_infowindow2.close();


                },
                error: function(jqXHR, textStatus, errorThrown) {

                }

            });
            }

How to call Php file using javascript

1 Answers1