Join the social network of Tech Nerds, increase skill rank, get work, manage projects...

 2 Answer(s)

  • Hello Sylvster,

    You can simply fetch the langitude and longitude from database and pass them in map api. Please a look.

        if( $&#95;SERVER['REQUEST&#95;METHOD']=='GET' && isset( $&#95;GET['ajax'] ) ){
            $dbhost =   'localhost';
            $dbuser =   'root'; 
            $dbpwd  =   'xx'; 
            $dbname =   'xxx';
            $db     =   new mysqli( $dbhost, $dbuser, $dbpwd, $dbname );
            $sql    =   'select 
                            `location&#95;name` as \'name\',
                            `location&#95;Latitude` as \'lat\',
                            `location&#95;Longitude` as \'lng\'
                            from `maps`
                            limit 100';
            $res    =   $db->query( $sql );
            if( $res ) while( $rs=$res->fetch&#95;object() ) $places[]=array( 'latitude'=>$rs->lat, 'longitude'=>$rs->lng, 'name'=>$rs->name );
            header( 'Content-Type: application/json' );
            echo json&#95;encode( $places,JSON&#95;FORCE&#95;OBJECT );
    <!doctype html>
            <meta charset='utf-8'/>
            <title>Google Maps</title>
            <script src=""></script>
            <script src='' type='text/javascript'></script>
            <script type='text/javascript'>
                    var map,marker,latlng,bounds,infowin;
                    /* initial locations for map */
                    var _lat=56.61543329027024;
                    var _lng=-2.9266123065796137;
                    var getacara=0; /* What should this be? is it a function, a variable ???*/
                    function showMap(){
                        /* set the default initial location */
                        latlng={ lat: _lat, lng: _lng };
                        bounds = new google.maps.LatLngBounds();
                        infowin = new google.maps.InfoWindow();
                        /* invoke the map */
                        map = new google.maps.Map( document.getElementById('map'), {
                           zoom: 10
                        /* show the initial marker */
                        marker = new google.maps.Marker({
                           map: map,
                           title: 'Hello World!'
                        bounds.extend( marker.position );
                        /* I think you can use the jQuery like this within the showMap function? */
                                I'm using the same page for the db results but you would 
                                change the below to point to your php script ~ namely
                            url: document.location.href,/*'phpmobile/getlanglong.php'*/
                            data: { 'id': getacara, 'ajax':true },
                            dataType: 'json',
                            success: function( data, status ){
                                $.each( data, function( i,item ){
                                    /* add a marker for each location in response data */ 
                                    addMarker( item.latitude, item.longitude, );
                            error: function(){
                                output.text('There was an error loading the data.');
                    /* simple function just to add a new marker */
                    function addMarker(lat,lng,title){
                        marker = new google.maps.Marker({/* Cast the returned data as floats using parseFloat() */
                           position:{ lat:parseFloat( lat ), lng:parseFloat( lng ) },
                        google.maps.event.addListener( marker, 'click', function(event){
                        }.bind( marker ));
                        bounds.extend( marker.position );
                        map.fitBounds( bounds );
                    document.addEventListener( 'DOMContentLoaded', showMap, false );
                html, html body, #map{ height:100%; width:100%; padding:0; margin:0; }
            <div id='map'></div>

    In the above code please replace &#95; with _

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: