I am trying to add google map in the frontend. I added embedded google map in phtml. here is my code

    $contacts_config = $this->getConfig('porto_settings/contacts');
    $_enable = $contacts_config['enable'];
        $_apikey = $contacts_config['api_key'];
        $_full_width = $contacts_config['full_width'];
        $_address = $contacts_config['address'];
        $_zoom = $contacts_config['zoom'];
        $_center_lat = $contacts_config['latitude'];
        $_center_lng = $contacts_config['longitude'];
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?<?php if($_apikey): ?>key=<?php echo $_apikey; ?><?php else: ?>v=3.17<?php endif; ?>"></script>
<script type="text/javascript">
    function initialize() {
        var pos = new google.maps.LatLng(<?php echo $_center_lat; ?>, <?php echo $_center_lng; ?>);
        var mapOptions = {
            center: pos,
            panControl: true,
            zoomControl: true,
            mapTypeControl: true,
            scaleControl: true,
            streetViewControl: true,
            overviewMapControl: true,
            zoom: <?php echo $_zoom; ?>
        var map = new google.maps.Map(document.getElementById("store_map"), mapOptions);
        var marker = new google.maps.Marker({
            position: pos,
            map: map,
            title: '<?php echo $_address; ?>'
    google.maps.event.addDomListener(window, 'load', initialize);
<?php if(!$_full_width): ?>
<div class="container">
<?php endif; ?>
<iframe src="https://www.google.com/maps/embed?pb" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<?php if(!$_full_width): ?>
<?php endif; ?>

I am getting a map but not for this location.

  • 1
    Try this way magehit.com/blog/… Commented Oct 18, 2018 at 12:54
  • yes. i did it and add it in phtml file but its not working Commented Oct 18, 2018 at 12:57
  • What error you get? Commented Oct 18, 2018 at 13:02
  • i am not getting any error. i am just getting simple world map Commented Oct 18, 2018 at 13:16
  • You mean location Popup not showing? Commented Oct 18, 2018 at 13:43

3 Answers 3


Use below link, it will solve your purpose. https://developers.google.com/maps/documentation/embed/start

  • In the unlikely event that google move this page, this answer becomes useless. Try not to answer with link only solutions.
    – Someone
    Commented Oct 18, 2018 at 14:39

Try this google map extension in magento 2
Magento 2 Google Maps extension allows displaying the location of the store on Contact us Page, which makes the site look more informative and professional.

  • Adding maps to contact page
  • 4 maps types, 10 maps styles
  • 2 choices of embedding Google maps
  • Automatically get GPS coordinates
  • Mobile responsive
  • Compatible with Mageplaza Store Locator
  • REST API, GraphQL is ready

Please follow this link to learn more about this implementation - https://www.mageplaza.com/magento-2-google-maps/?gclid=Cj0KCQjwmIuDBhDXARIsAFITC_7iOar0hLCg7w3tXnoZwwDWDGdPDcdOAEpo9G0UDyPYzRJl-kZVYbYaAosoEALw_wcB


Apart from extension, you can also do so using page builder by inserting map API in the store backend and choosing which page to have the map shown. Step by step guide: https://www.mageplaza.com/blog/how-to-add-google-map-on-a-magento-2-page.html

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.