Forums

google map Javascript v3 with multiple markers and concrete 5 problem

Permalink 2 users found helpful
Here is a simple example from the google developers site, which works fine if you open it as a independent page:
<!DOCTYPE html>
<html>
  <head>
    <?php  //defined('C5_EXECUTE') or die("Access Denied.");
   //$form = Loader::helper('form');
   //$html = Loader::helper("html");
   ?>
    <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 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?sensor=false">
Viewing 15 lines of 35 lines. View entire code block.


But, if you open this page as a concrete5 single page, it shows nothing.

I made a block, with this lines of code:

controller.php
public function on_page_view() {
     $html = Loader::helper('html');
      $this->addHeaderItem($html->css('jquery.ui.css'));
      $this->addHeaderItem($html->css('ccm.dialog.css'));
      $this->addHeaderItem($html->javascript('jquery.ui.js'));
      $this->addHeaderItem($html->javascript('ccm.dialog.js'));
   $this->addHeaderItem('<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>'); 
   }


view.php
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
<?php  defined('C5_EXECUTE') or die("Access Denied."); ?>  
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
   </head>
   <body onload="initialize">
    <div id="map_canvas" style="width:100%; height:100%"></div>
      <script type="text/javascript">
      var initialize = (function () {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
Viewing 15 lines of 27 lines. View entire code block.


Although I tried to invoke the javascript function initialize on three different ways, everything I got is a blank square!

Could you please help me out to solve this problem.

Thanks in advance,
Zoc
nitro
 
JohntheFish replied on at Permalink Reply
JohntheFish
The howto you are using is a few years old and what you need to load has moved on since then. You never need to load ccm.dialog.

For your example, the maps are pure JavaScript rather than jQuery, so the only header item you need in your block controller on_page_view is the reference to google maps.

(As an aside, if you were using jquery.ui.js, you would also need jquery.js. You can see examples of loading them in my free LoadUi addon
http://www.concrete5.org/marketplace/addons/load-jquery-ui/... )

I am not sure about your initialise. There may be some closure scope issues, but I am not sure because that is not how I personally tend to wqrite script. You could try just the one script section with:
window.onload = function(){
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
};

Or, if you do load jquery using addHeaderItem
$(document).ready(function(){
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
});
nitro replied on at Permalink Reply
nitro
Hello JohntheFish,

I changed the code as per your good recommendations,

controller.php
<code>
public function on_page_view() {
$this->addHeaderItem('<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>');
}
</code>

view.php
<code>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
<?php defined('C5_EXECUTE') or die("Access Denied.");
?>
</head>

<body>
<script type="text/javascript">
window.onload = function(){
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
};
</script>
</body>
</html>
</code>

But yet nothing happens...
If I add it as the jQuery code, it should be in auto.js or ./js/block_name.js, right?
mhawke replied on at Permalink Reply
mhawke
I haven't spent too much time going over your code but don't you need an API key in the last line of your on_page_view function:

src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE


from...

https://developers.google.com/maps/documentation/javascript/tutorial...
nitro replied on at Permalink Reply
nitro
It's interesting that it works well without API key... just invoke javascipt code outside concrete5 and everything is ok.
nitro replied on at Permalink Reply
nitro
Also,
SET_TO_TRUE_OR_FALSE
should be
true
or
false
lowercase, otherwise google replies that you supplied a wrong parameter.
mhawke replied on at Permalink Reply
mhawke
I just copied that line from the Google support site.

Here is another thread about the Google Map. It might help:

http://www.concrete5.org/community/forums/usage/google-maps-install...