I Make a file of Google Map in which there are a drop-down functionality but first i created this file in html it's working perfectly but when i tried in CMS page or phtml page the map not shown.

As per my research there are a css problem any one can help in this

This is my mapgeo.html you can copy code and create mapgeo.html on your desktop to see output this file working perfectly but it is not working in magento.

<!DOCTYPE html>
    <title>Geocoding service</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
    <div id="floating-panel">
    <select id="address">
      <option value="Sydney, NSW">Sydney</option>
      <option value="prachi infosys">Prachi Infosys</option>
      <!-- <input id="address" type="textbox" value="Sydney, NSW"> -->
      <input id="submit" type="button" value="Search">
    <div id="map"></div>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: -34.397, lng: 150.644}
        var geocoder = new google.maps.Geocoder();

        document.getElementById('submit').addEventListener('click', function() {
          geocodeAddress(geocoder, map);

      function geocodeAddress(geocoder, resultsMap) {
        var address = document.getElementById('address').value;
        geocoder.geocode({'address': address}, function(results, status) {
          if (status === 'OK') {
            var marker = new google.maps.Marker({
              map: resultsMap,
              position: results[0].geometry.location
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
    <script async defer

I copy your code and paste in my admin CMS page. one thing i changed in your code style height "%" into "px" like

#map {
        height: 500px;

Hope this helpfull

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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