Pass variables from php to javascript google map

Question

I need to pass some php variables to an external js file where my google map is initialized. Of course the map itself should use those variables. For now I can't see my map correctly loaded and I get the error

TypeError: map is undefined

and I can't even pass my variables! I'm trying to use the easiest way like

My php

<script type="text/javascript"> 
    var marker = <?php echo json_encode($marker_img); ?>; //this should send the marker image url
    var latitude = '<?php echo $post_latitude; ?>'; //this is the latitude
    var longitude = '<?php echo $post_longitude; ?>'; //this is the long
    var paddress = '<?php echo $address; ?>'; //this is the address name
</script>

Now I guess that I'm doing wrong something in my js:

var geocoder;
var map;
function initialize_map() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(latitude, longitude);
    var myOptions = {
        scrollwheel: false,
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"administrative","elementType":"labels","stylers":[{"saturation":"-100"}]},{"featureType":"administrative","elementType":"labels.text","stylers":[{"gamma":"0.75"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"lightness":"-37"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f9f9f9"}]},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"saturation":"-100"},{"lightness":"40"},{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"labels.text.fill","stylers":[{"saturation":"-100"},{"lightness":"-37"}]},{"featureType":"landscape.natural","elementType":"labels.text.stroke","stylers":[{"saturation":"-100"},{"lightness":"100"},{"weight":"2"}]},{"featureType":"landscape.natural","elementType":"labels.icon","stylers":[{"saturation":"-100"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"saturation":"-100"},{"lightness":"80"}]},{"featureType":"poi","elementType":"labels","stylers":[{"saturation":"-100"},{"lightness":"0"}]},{"featureType":"poi.attraction","elementType":"geometry","stylers":[{"lightness":"-4"},{"saturation":"-100"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"},{"visibility":"on"},{"saturation":"-95"},{"lightness":"62"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road","elementType":"labels","stylers":[{"saturation":"-100"},{"gamma":"1.00"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"gamma":"0.50"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"saturation":"-100"},{"gamma":"0.50"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"},{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"lightness":"-13"}]},{"featureType":"road.highway","elementType":"labels.icon","stylers":[{"lightness":"0"},{"gamma":"1.09"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"},{"saturation":"-100"},{"lightness":"47"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"lightness":"-12"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"},{"lightness":"77"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"lightness":"-5"},{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"saturation":"-100"},{"lightness":"-15"}]},{"featureType":"transit.station.airport","elementType":"geometry","stylers":[{"lightness":"47"},{"saturation":"-100"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]},{"featureType":"water","elementType":"geometry","stylers":[{"saturation":"53"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"lightness":"-42"},{"saturation":"17"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"lightness":"61"}]}],
    },
    map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function codeAddress(address) {
    geocoder.geocode( { 'address': paddress}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new MarkerWithLabel({
                position: results[0].geometry.location,
                map: map, //Here I get the error
                icon: pointer, //Here I don't get any image
                labelContent: paddress, //here I don't get any address
                labelAnchor: new google.maps.Point(22, 0),
                labelClass: "labels",
                labelStyle: {opacity: 1.0},
            });
        } else {
        //alert("Geocode was not successful for the following reason: " + status);
        }
    });
}
initialize_map();
codeAddress('location');

The map it's shown, I see it but without parameters. What's wrong???

Answer 1

A quick fix
return the map , otherwise your codeAddress function will run without waiting for the previous function ;)

function initialize_map() {
 ....
 return map;
}

window.map = initialize_map();
codeAddress('location');

Not sure about your php stuff, if it works, one problem could be another scope.

Try to map the variables to the global window object as shown with the map.. (quick & dirty fix)

Answer 2

I get a javascript error: Uncaught TypeError: Cannot read property 'setCenter' of undefined on this line:

map.setCenter(results[0].geometry.location);

The main issue is the comma at the end of the definition of the mapOptions variable, that makes the following declaration of the map variable local to the initialize_map function, make the line in initialize_map initialize the global map by changing that to a semi-colon ( ; ).

proof of concept fiddle

code snippet:

 // var marker = <?php echo json_encode($marker_img); ?>; //this should send the marker image url var latitude = '40.7127837'; //this is the latitude var longitude = '-74.0059413'; //this is the long var paddress = 'New York, NY'; //this is the address name var geocoder; var map; function initialize_map() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(latitude, longitude); var myOptions = { scrollwheel: false, zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, styles: [{ "featureType": "administrative", "elementType": "all", "stylers": [{ "visibility": "on" }, { "lightness": 33 }] }, { "featureType": "administrative", "elementType": "labels", "stylers": [{ "saturation": "-100" }] }, { "featureType": "administrative", "elementType": "labels.text", "stylers": [{ "gamma": "0.75" }] }, { "featureType": "administrative.neighborhood", "elementType": "labels.text.fill", "stylers": [{ "lightness": "-37" }] }, { "featureType": "landscape", "elementType": "geometry", "stylers": [{ "color": "#f9f9f9" }] }, { "featureType": "landscape.man_made", "elementType": "geometry", "stylers": [{ "saturation": "-100" }, { "lightness": "40" }, { "visibility": "off" }] }, { "featureType": "landscape.natural", "elementType": "labels.text.fill", "stylers": [{ "saturation": "-100" }, { "lightness": "-37" }] }, { "featureType": "landscape.natural", "elementType": "labels.text.stroke", "stylers": [{ "saturation": "-100" }, { "lightness": "100" }, { "weight": "2" }] }, { "featureType": "landscape.natural", "elementType": "labels.icon", "stylers": [{ "saturation": "-100" }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "saturation": "-100" }, { "lightness": "80" }] }, { "featureType": "poi", "elementType": "labels", "stylers": [{ "saturation": "-100" }, { "lightness": "0" }] }, { "featureType": "poi.attraction", "elementType": "geometry", "stylers": [{ "lightness": "-4" }, { "saturation": "-100" }] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [{ "color": "#c5dac6" }, { "visibility": "on" }, { "saturation": "-95" }, { "lightness": "62" }] }, { "featureType": "poi.park", "elementType": "labels", "stylers": [{ "visibility": "on" }, { "lightness": 20 }] }, { "featureType": "road", "elementType": "all", "stylers": [{ "lightness": 20 }] }, { "featureType": "road", "elementType": "labels", "stylers": [{ "saturation": "-100" }, { "gamma": "1.00" }] }, { "featureType": "road", "elementType": "labels.text", "stylers": [{ "gamma": "0.50" }] }, { "featureType": "road", "elementType": "labels.icon", "stylers": [{ "saturation": "-100" }, { "gamma": "0.50" }] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [{ "color": "#c5c6c6" }, { "saturation": "-100" }] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "lightness": "-13" }] }, { "featureType": "road.highway", "elementType": "labels.icon", "stylers": [{ "lightness": "0" }, { "gamma": "1.09" }] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [{ "color": "#e4d7c6" }, { "saturation": "-100" }, { "lightness": "47" }] }, { "featureType": "road.arterial", "elementType": "geometry.stroke", "stylers": [{ "lightness": "-12" }] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [{ "saturation": "-100" }] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [{ "color": "#fbfaf7" }, { "lightness": "77" }] }, { "featureType": "road.local", "elementType": "geometry.fill", "stylers": [{ "lightness": "-5" }, { "saturation": "-100" }] }, { "featureType": "road.local", "elementType": "geometry.stroke", "stylers": [{ "saturation": "-100" }, { "lightness": "-15" }] }, { "featureType": "transit.station.airport", "elementType": "geometry", "stylers": [{ "lightness": "47" }, { "saturation": "-100" }] }, { "featureType": "water", "elementType": "all", "stylers": [{ "visibility": "on" }, { "color": "#acbcc9" }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "saturation": "53" }] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "lightness": "-42" }, { "saturation": "17" }] }, { "featureType": "water", "elementType": "labels.text.stroke", "stylers": [{ "lightness": "61" }] }], }; map = new google.maps.Map(document.getElementById("map"), myOptions); } function codeAddress(address) { geocoder.geocode({ 'address': paddress }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new MarkerWithLabel({ position: results[0].geometry.location, map: map, //Here I get the error //icon: pointer, //Here I don't get any image labelContent: paddress, //here I don't get any address labelAnchor: new google.maps.Point(22, 0), labelClass: "labels", labelStyle: { opacity: 1.0 }, }); } else { //alert("Geocode was not successful for the following reason: " + status); } }); } initialize_map(); codeAddress('location');

 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="https://cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/markerwithlabel/src/markerwithlabel.js"></script> <div id="map"></div>