Pass php variable (place name) to google map (javascript) to mark the location

Question

Anyone Give me solution on how to put the $location variable to jscript to get the location on Google Map. And what should be the value of location (location name or postal code ) . Here is the code :

<?php 
$location=$_GET["clocation"]; //fetched clocation from database in previous page
?>

<div id="map" style="width:100%;height:500px"></div>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(23.6943,90.3444); //Here i want to put my location value to get location on google map
  var mapCanvas = document.getElementById("map");

  var mapOptions = {center: myCenter, zoom: 7, panControl: true,
    zoomControl: true,
    mapTypeControl: true,
    scaleControl: true,
    streetViewControl: true,
    overviewMapControl: true,
    rotateControl: true };
  var map = new google.maps.Map(mapCanvas, mapOptions);
  var marker = new google.maps.Marker({position:myCenter});
  marker.setMap(map);

}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<hidden>&callback=myMap"></script>

is $location a place name or a lat/lng? Please give example of $location — Professor Abronsius, Mar 02 '18 at 07:45
without knowing what `$location` contains it's hard to answer - if it is an address or lat/lng affects how to provide solution — Professor Abronsius, Mar 02 '18 at 07:53
Now I'd say that's a duplicate of https://stackoverflow.com/questions/15925980/using-address-instead-of-longitude-and-latitude-with-google-maps-api — Takit Isy, Mar 02 '18 at 08:23

Takit Isy · Answer 1 · 2018-03-02T08:19:00.513

0

Assuming your location is in the correct formatting (lat,lng),
You could simply do this in your script:

<?php 
$location=$_GET["clocation"]; //fetched clocation from database in previous page
?>
…
var myCenter = new google.maps.LatLng(<?php echo $location ?>); //Here we simply echo the $location
…

Edit: I see you edited your post with “(location name or postal code )”.

Google Maps API offers a Geocoding service that can be used to convert your address to the lat,lng format.

Here is the link to the Geocoding documentation:
https://developers.google.com/maps/documentation/javascript/geocoding

And, a similar question was answered here:
Using Address Instead Of Longitude And Latitude With Google Maps API

edited Mar 02 '18 at 08:19

answered Mar 02 '18 at 07:59

Takit Isy

9,688
3
23
47

Assuming your location is in the correct formatting, how can i convert the place name to LatLng format ? Or is there any function in GoogleMap that can take location name to find location on map?? – NiiLx Mar 02 '18 at 08:11
Why ignore my questions above? – Professor Abronsius Mar 02 '18 at 08:11
@RamRaider, sorry I was either in my thoughts or already writing my answer. I didn't noticed your comments above. – Takit Isy Mar 02 '18 at 08:20
@NiiLHridoy, I added links to documentation and similar question in my answer. Hope it will help. – Takit Isy Mar 02 '18 at 08:21
Sorry i didnt notice. Anyway $location is value of a location name now. How can i convert it to latlng? is there any function? – NiiLx Mar 02 '18 at 08:21

score 0 · Answer 2 · answered Mar 02 '18 at 08:21

Assuming that the value of clocation is a city ( thanks for adding that detail ) you need to use the GeoCoder service to translate an address to a latLng which you can then use to add a marker at that location like this.

<?php 
    $location=isset( $_GET["clocation"] ) ? $_GET["clocation"] : 'London';
?>
<html>
  <head>
    <script>
        function myMap() {
        <?php
            echo "
            var address='$location';
            ";
        ?>


            var geocoder = new google.maps.Geocoder();
            var infoWindow = new google.maps.InfoWindow();

            var myCenter = new google.maps.LatLng( 23.6943, 90.3444 );
            var mapCanvas = document.getElementById("map");

            var mapOptions = {
                center: myCenter, 
                zoom: 7, 
                panControl: true,
                zoomControl: true,
                mapTypeControl: true,
                scaleControl: true,
                streetViewControl: true,
                overviewMapControl: true,
                rotateControl: true
            };
            var map = new google.maps.Map( mapCanvas, mapOptions );
            var marker = new google.maps.Marker( { position:myCenter } );
                marker.setMap( map );


            /* a callback function to process the response from geocoding */
            var evtcallback=function(results, status){
                if( status == google.maps.GeocoderStatus.OK ){

                    var _address=results[0].formatted_address;
                    var _location=results[0].geometry.location;
                    var _lat=_location.lat();
                    var _lng=_location.lng();

                    console.info( 'Geocoding succeeded for %s and found address %s [ %s,%s ]', address, _address, _lat, _lng );

                    latlng=new google.maps.LatLng( _lat, _lng );
                    marker.setPosition( latlng );
                    marker.setTitle( _address );

                    google.maps.event.addListener( marker, 'click', function(event){
                        infoWindow.setContent( this.title );
                        infoWindow.open( map, this );
                        infoWindow.setPosition( this.position );
                    }.bind( marker ) );

                    map.setCenter( latlng );
                    map.setZoom(15);
                } else {
                    console.info('geocoding %s failed with status %d', address, status);
                }
            }
            /* invoke the geocoder service with your location to geocode */
            geocoder.geocode({ 'address':address }, evtcallback );
        }
    </script>
    <script async defer src="//maps.google.com/maps/api/js?key=<APIKEY>&callback=myMap"></script>
    <style type="text/css">
        #map {
            width: 100%;
            height: 80vh;
            margin-top: 10px;
        }
    </style>
    </head>
<body>
    <div id="map"></div>
</body>
</html>

Thanks a lot. It worked. But if you explain where i am putting my $location value? — NiiLx, Mar 02 '18 at 08:45
that was added as a javascript variable at the top of the `myMap` function - called `address` - it is that value that gets passed to the geocoder. There is no need to use php for that task but I did here for simplicity. — Professor Abronsius, Mar 02 '18 at 08:47
var _address=results[0].formatted_address; var _location=results[0].geometry.location; what is that result[0]? using same array index? — NiiLx, Mar 02 '18 at 08:55
they are the results returned from thecallback function - I used the underscore to differentiate between variables declared outside callback and thos declared withing — Professor Abronsius, Mar 02 '18 at 09:23

Pass php variable (place name) to google map (javascript) to mark the location

2 Answers2