CODEWITHSUNDEEP
phpjavascriptgoogle-maps-api-3
Deanflyer
Deanflyer

Reputation: 13

google maps api and php integration issue

I have a Google Map which display fine (Google Maps API v3 - see code below). The code was initially inserted into the main index.php like so:-

<script type="text/javascript">
code here....
</script>

This works fine as inline code, and I can also use within index.php to insert variables from my PHP code into the Google Maps API.

As the code is growing I wanted to separate out the Google Maps API javascript and pop it into an external file for tidyness.

My first thought was to insert the file like so:

<script type="text/javscript" src="code/googlemaps.php"></script>

Now this works as it stands, however as soon as I try to insert any PHP code it wont work. I'm not too sure of how the PHP server handles the requests, but I guess I want the js file to be handed to the PHP parser and the PHP code to be parsed and the js with the parsed php then passed back to the browser.

The code is triggered by 

<body onload="initialize()">

within my main index.php (im new to javascript so please bear with me).

For completeness here is the js code im using:

    function initialize() {

    // Main Google Map view variables
    var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(<?php echo $selected_lat . "," . $selected_lon; ?>),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        noClear: true,
        panControl: true,
        panControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT
            },
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.TOP_RIGHT
            },
        scaleControl: true,
        scaleControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_RIGHT
            },
        streetViewControl: false
    };

    // Display Google Map
    var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);

    //Display Select Airport Marker
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(<?php echo $selected_lat . "," . $selected_lon; ?>),
        map: map,
        title:"<?php echo  $airport_name[$selected_airport]; ?> Airport Reference Point\na new line\nanother line"
    });

    // google.maps.Circle variables
    var seRangeOptions = {
        center: new google.maps.LatLng(<?php echo $selected_lat . "," . $selected_lon; ?>),
        fillOpacity: 0.3,
        fillColor: "blue",
        map: map,
        radius: <?php echo seradius; ?>,
        strokeColor: "#000000",
        strokeOpacity: 0.0,
        strokeWeight: 0
    };


    // display Google Maps circle
    serangecircle = new google.maps.Circle(seRangeOptions);
}

ok, problem solved. Here is what I did, feedback welcome, I'm still learning :) Following code put into JavaScript file:

<?php session_start(); ?>
<?php echo 'var lat = "'.json_encode($_SESSION['lat']).'";';?>

Still a bit fuzzy on the order this all gets executed. I'm assuming PHP parses the javascript file, inserts the PHP variables and then returns the file to the browser? Also, any utilities like Firebug will let me see how this works in practice.

I also popped in the following at the top of the js file which seems to tidy-up how the source code is displayed in the browser too:

<?php header('Content-type: text/javascript'); ?>

Upvotes: 1

Views: 407

Answers (1)

Polyana Fontes
Polyana Fontes

Reputation: 3212

The issue might be this line:

 title:"<?php echo  $airport_name[$selected_airport]; ?> Airport Reference Point\na new line\nanother line"

JavaScript doen't accept newlines to directly to continue the string, you must use \n, if title:"<?php echo $airport_name[$selected_airport]; ?> Airport Reference Point\na new line\nanother line" is returning a multiline String then it will break the JavaScript code.

Try to use the str_replace() function to replace all new lines to \n, and also addslashes() so " will not break the JavaScript String too

title:"<?php echo str_replace("\n", '\n', str_replace("\r",'', addslashes($airport_name[$selected_airport]))); ?> Airport Reference Point\na new line\nanother line"

Upvotes: 1

Related Questions