CODEWITHSUNDEEP
phpjavascriptmysqlgoogle-maps
Brandon Young
Brandon Young

Reputation: 523

Calling a JavaScript function in PHP for Google Map

hopefully you can help me. I have read a lot of forums regarding this but still cannot get what I wanted. I'm using PHP/MySQL to run my system. I already had a code in JavaScript that will allow the user to add a place and the system can add that place in the Google Map (embedded in my site) as a marker. Now, what I wanted is to add the coordinates of that new place in my database and then my map will just get the markers from the database for adding in the map.

Currently, what I did is to get the latitude and longitude of the added place from the javascript then was able to pass them to my php script within the same file. The latitude and longitude can be added in my database but I do not know now how to go back again to JavaScript so that I can add my markers.

What is the best way to do this? Is/Are there better approaches to solve this?

<?php
$marker = array();
if(isset($_GET['set'])){
    $lat = $_GET['lat'];
    $long = $_GET['longi'];
    $newadd = $_GET['newAdd'];

    $connect = mysql_connect("localhost","root","");
    mysql_select_db("mapping");
    $query=mysql_query("INSERT INTO markers VALUES('','','$newadd','$lat','$long','')");

}
?>

My JavaScript to place markers

function addMarkers(){
        var tempMarker;
        var tabs = [];
        var blueIcon = new GIcon(G_DEFAULT_ICON);
        blueIcon.image = "http://maps.google.com/mapfiles/ms/micons/green-dot.png";

        // Set up our GMarkerOptions object
        markerOptions = { icon:blueIcon };
// for loop get data from db and loop it
        tempMarker = new GMarker(tempLatLng,markerOptions);
        //if(tabs.length==0){
            tabs[ctr] = [new GInfoWindowTab('Greetings','Hi! Welcome'), new GInfoWindowTab('My Info',tempMarker.getLatLng().toString())];
        //}
        tabInfoWindow(tempMarker,tabs, ctr);
        markerArray.push(tempMarker);
        displayMarkers();
    }
}

Thanks!

Upvotes: 1

Views: 2218

Answers (2)

Diode
Diode

Reputation: 25135

Using jquery you can post the data in an ajax request and continue adding the markers in the success handler.

var location = {lat:56, lng:67, name:"my_place"};

$.ajax({
  url: "save_place.php",
  data: location,
  dataType:"json",
  success: function(response){
    if(response.success){

       // add marker to map here   

    }else{

        alert("Error adding location to database");

    }
  },
  error:function(){
    alert("Error in connecting to server");
  }
});

EDIT:

From your comments, I understand what you need is this one:

<?php
   $lat = isset($_GET['lat']) ? $_GET['lat'] : 0;
   $long = isset($_GET['longi']) ? $_GET['longi'] : 0;
   $newadd = isset($_GET['newAdd']) ? $_GET['newAdd'] : "";
 ?>
<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type='text/javascript' src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
        <style type='text/css'>
            #map {
              width: 400px;
              height: 400px;
            }
        </style>
    </head>
    <body>
    <div id="map"></div> 

    <script type='text/javascript'>//<![CDATA[ 

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: new google.maps.LatLng(55, 11),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    function addMarker(lat, lng, newAdd) {

        alert(" Adding marker " +  lat + "," + lng);

        this.lat = lat;
        this.long = lng;

        var location = new google.maps.LatLng(lat, long);
        var marker = new google.maps.Marker({
            position: location,
            title: name,
            map: map,
            draggable: true
        });
        map.setCenter(location);

    }
    <?php
        echo "addMarker($lat, $long, '$newadd')";
    ?>  

    </script>

    </body>
</html>

url : http://<domain>/test.php?lat=40.735812&longi=-74.001389&newAdd=

Upvotes: 4

Manatok
Manatok

Reputation: 5706

Well what I do is have a endpoint on the PHP side that I can ask for the markers. Then when my map has loaded I will make a call to get them and then add them on:

$.post('/server/getMarkers',{},function(markers) {
   for(var i=0; i < markers.length; i++) {
       marker = new google.maps.Marker({
            position: new google.maps.LatLng(marker[i].latitude, marker[i].longitude),
            id:marker[i].id
       });

       google.maps.event.addListener(marker, "click", function() {

        //request data for this.id to show in info window if needed

       });
   }

});

The getMarkers method on the PHP side could look something like this

public function getMarkers() {

    /* fetch an array of markers details from the db by any means... */
    $markers = getMarkersFromDB();

    foreach ($markers as $key=> $marker) {
            $payload[$key]['latitude'] = $marker->latitude;
            $payload[$key]['longitude'] =  $marker->longitude;
            $payload[$key]['id'] = $marker->id;
    }
    echo json_encode($payload);
}

Upvotes: 0

Related Questions