I am trying to render Google Map on my custom page. I have template that renders smth but it does not render map.

But I've discovered strange thing (for me) if echo smth in controller between

$this->loadLayout(); echo 'asd'; $this->renderLayout(); 


class Stas_Offices_IndexController extends Mage_Core_Controller_Front_Action
    public function indexAction()
        echo 'asd';

Template: officesmap.phtml (MY_API_KEY = my google api key)

<div style="height: 100%" id="map"></div>
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 40.7413549, lng: -73.9980244},
            zoom: 13

<script async defer

Layout: app/design/frontend/base/default/layout/stasoffices.xml

<layout version="0.1.0">
    <reference name="content">
        <block type="stasoffices/officesmap" name="stas.offices.officesmap" template="stas/offices/officesmap.phtml"></block>

This is what I see when I echo'123'; in Controller enter image description here

And this is when there is no echo'123'; in Controller

enter image description here

The only difference I understood that scripts with API include earlier when echo'123'; in Controller

Could anyone please explain me why this happens and how to render map without this ugly "echo" in controller! Thank you.

  • Do you get any JS errors when map is not loading? If your H1 tag is rendered, then the template is loaded. Do you see your template js content in page source? Commented Oct 10, 2017 at 7:39
  • I see my template js content in page source. I don't get any JS errors.
    – Koiten
    Commented Oct 10, 2017 at 11:03

2 Answers 2


In our project we use map without any conflicts, Could you please try to cover your map initialization function by load event like

window.onload = function () {


And delete async call of your map.

This is code from our module where map works perfectly -

<script language="javascript" type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places<?php echo $this->getApiKey() ?>"></script>
<script type="text/javascript">

    window.onload = function () {
        AmLocation = new AmLocator('<?php echo $this->getUrl('amlocator/index/ajax').$this->getQueryString(); ?>',<?php echo $this->getGeoUse() ?>);
        AmLocation.Amastyload(<?php echo $this->getJsonLocations() ?>);

At the Load function we just init map and do some module logic.

initializeMap: function() {
    this.infowindow = [];
    this.marker = [];
    var myOptions = {
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    this.map = new google.maps.Map(document.getElementById("amlocator-map-canvas"), myOptions);

Feel free if you have any questions. If you still have this issue at your project please provide screenshot of the browser console.

  • I've provided screenshots of developer tools. Console is clean. There is no any error. I can't post more than 2 images cause of stackexchange restriction for my reputation (lower than 10). Thank you for your answer. But I still have this problem. And I still don't understand why this works like this.
    – Koiten
    Commented Oct 10, 2017 at 12:06

I tried this

<div style="height: 400px" id="map"></div>

And now it works perfect. Problem was in CSS height: 100%.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.