Embedding A Googlemap via PHP include statement

Question

I have created a custom google map to display my business branches, (which is stored in a file called [map-locations].php.

When i open this file in a browser the file displays perfectly, however if i try to include this php file using an include statement it does not display at all.

I have tried to copy and paste the code directly into the page on my website i would like the code to show, but it does not show there either.

I would much rather be able to have the map displaying via an include statement, but right now just to display at all would be great!

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      .wrap { max-width: 75em; min-height: 40em; height:600px; width:500px;   margin: 0 auto; padding-top: 2.5%;}
      #map-canvas { height: 90%; }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true">
    </script>
    <script type="text/javascript">
      var map;
      var centerPos = new google.maps.LatLng(51.6491587,0.0386048);
      var zoomLevel = 11;


      function LogoControl(controlDiv, map) { 
  controlDiv.style.padding = '5px';
  var controlUI = document.createElement('div');
  controlUI.style.backgroundImage = 'url(http://www.1stopinstruction.com/media/images/logos/1stop/googlemap-title.gif)';
  controlUI.style.width = '275px';
  controlUI.style.height = '65px';
  controlUI.style.cursor = 'pointer';
  controlUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(controlUI);
  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(centerPos)
    map.setZoom(zoomLevel)
  });

}

      function initialize() {
        var mapOptions = {
          center: centerPos,
          zoom: zoomLevel
        };
        map = new google.maps.Map( document.getElementById("map-canvas"), mapOptions );
            var locations = [
  ['East London - Ilford (Fairlop Powerleague)', 51.598589, 0.101594],
  ['North London - Tottenham (Frederick Knight Sports Ground)',51.607052, -0.054270],
  ['Highams Park - Chingford (LGV & PCV Only)',51.609685, -0.005183],
  ['North Weald Airfield (kneedown & Wheelie Only)',51.717709, 0.160214],
  ['Office Address',51.572126, 0.106147]
]
var image = "http://www.1stopinstruction.com/media/images/logos/1stop/googlemap-icon.gif";

 logoControlDiv = document.createElement('div');
var logoControl = new LogoControl(logoControlDiv, map);

logoControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(logoControlDiv);


for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    title: locations[i][0],
    map: map,
    icon: image
  });
}
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

  <body>
  <div class="wrap">
    <div id="map-canvas"></div>
  </div>
  </body>

Have you checked your HTML at your browser level to see if the map
is even created? If its not there your problem is the include. If it is there the problem is whats inside the include. — BigScar, Feb 06 '15 at 14:41

score 0 · Answer 1 · answered Feb 06 '15 at 14:45

0

The problem is that your javascrip code is executed before the DOM is completely charged. Put your javascript code at the botton of the document after the <div class="wrap">...</div> but inside the body tag

answered Feb 06 '15 at 14:45

sabotero

4,265
3
28
43

Embedding A Googlemap via PHP include statement

1 Answers1