-1

Look below my code. I have used custom popup. While I am reloading the page. 1st time Popup is working fine and map showing perfect. In second time when I am clicking on same the popup working fine but map not coming.

var geocoder;
 var map;
 function initialize() {
     geocoder = new google.maps.Geocoder();
     var myOptions = {
         zoom: 13,
         mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
 }

 function showMap() {
     var address = 'bhubaneswar'; //alert(address);
     geocoder.geocode({ 'address': address }, function(results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
             map.setCenter(results[0].geometry.location);
             var marker = new google.maps.Marker({
                 map: map,
                 position: results[0].geometry.location
             });
         } else {
             alert("Geocode was not successful for the following reason: " + status);
         }
     });
 }


$(function(){
       $('.get-direction').on('click',function(){
           initialize();
            showMap();
           $('#location-map').show();
       });
       $('.close-map').click(function(){
           $('#location-map').hide();
           $("#map-canvas").html('');
       });
 });
/* popup map start === */
.get-direction{
    cursor: pointer;
    text-decoration:underline;
}
#location-map {
    background: rgba(7, 50, 79, 0.8) none repeat scroll 0 0;
    display: none;
    height: 100%;
    left: 0;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}
#location-map .close-map {
    margin: 5% auto 0;
    overflow: hidden;
    text-align: right;
    width: 90%;
}
#location-map .close-map span {
    background-color: #e67e22;
    border-radius: 3px 3px 0 0;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    line-height: 1em;
    padding: 5px;
}
#location-map #map-canvas {
    height: 80%;
    margin: 0 auto;
    width: 90%;
}
.gm-style {
    font-family: Roboto,Arial,sans-serif;
    font-size: 11px;
    font-weight: 400;
}
#directions-control {
    background-color: #fff;
    display: none;
    padding: 0 10px 30px;
    text-align: center;
    width: 100%;
}
#location-map #map-canvas #directions-control {
    background-color: #fff;
    display: none;
    padding: 0 10px 30px;
    text-align: center;
    width: 100%;
}

#location-map #map-canvas #directions-control p {
    font-weight: bold;
    margin: 0;
    padding: 0;
}
#location-map #map-canvas #directions-control #directions-start {
    height: 17px;
    line-height: 17px;
    margin: 0 0 5px 50px;
    width: 200px;
}
#location-map #map-canvas #directions-control #directions-submit {
    background-color: #2876aa;
    border-radius: 3px;
    border-width: 0;
    color: #fff;
    cursor: pointer;
    height: 27px;
    line-height: 27px;
    margin: 0 0 5px;
    padding: 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<h4 class="get-direction">Bhubaneswar</h4>
<div id="location-map">
    <div class="close-map"><span>Close Map</span></div>
    <div id="map-canvas"></div>
    <div id="directions-display"><span class="error"></span></div>
</div>

JSFIDDLE

Chinmay235
  • 3,236
  • 8
  • 62
  • 93
  • possible duplicate of [Keep a Google Maps v3 Map hidden, show when needed](http://stackoverflow.com/questions/3360494/keep-a-google-maps-v3-map-hidden-show-when-needed) – BSMP Jun 29 '15 at 14:47
  • You'll want to add the line of code from the duplicate above `map.setCenter(results[0].geometry.location);` – BSMP Jun 29 '15 at 14:49

3 Answers3

2

Initializing is something you only do once (as the word suggests).

And your function showMap should show the map. If it does other things, call it something different.

My code reads the innerHTML of the h4, and uses that as address. examples:

<h4 class="get-direction">Bhubaneswar</h4>
<h4 class="get-direction">Atomium, Brussels</h4>

script

var geocoder;
var map;
// initializes Google maps
function initialize() {
  geocoder = new google.maps.Geocoder();
  var myOptions = {
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
}
// search for an address, put a marker there.
function searchAddress(address) {
  // 'bhubaneswar'; //alert(address);
  geocoder.geocode({ 'address': address }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}
// show the map
function showMap() {
  $('#location-map').show();
}
// hide the map (after the client clicks on the close button)
function hideMap() {
  $('#location-map').hide();
}
// document is loaded
$(function() {
  $('.get-direction').on('click',function() {
    // if map is null (the first time), initiate Google maps;
    if (! map) {
      initialize();
    }
    searchAddress( $(this).html() );
    showMap();
  });
  $('.close-map').click(function() {
    hideMap();
  });
});
Emmanuel Delay
  • 3,619
  • 1
  • 11
  • 17
2
  1. The geocoder is asynchronous. The first time it takes some time to get the response from the server, the second, the return value is already in the cache, so doesn't take any time.
  2. You are destroying the map after you hide it, don't do that, just hide it then recenter it when it is unhidden.
$(function() {
  $('.get-direction').on('click', function() {
    if (!map || !map.getCenter) {
      // if map doesn't exist yet, create it
      initialize();
    }
    // centers map and displays marker
    showMap();
    $('#location-map').show();
  });
  $('.close-map').click(function() {
    $('#location-map').hide();
    // $("#map-canvas").html('');
  });
});

updated fiddle

code snippet:

var geocoder;
var map;

function initialize() {
  geocoder = new google.maps.Geocoder();
  var myOptions = {
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
}

function showMap() {
  var address = 'bhubaneswar'; //alert(address);
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}


$(function() {
  $('.get-direction').on('click', function() {
    if (!map || !map.getCenter) {
      initialize();
    }
    showMap();
    $('#location-map').show();
  });
  $('.close-map').click(function() {
    $('#location-map').hide();
    // $("#map-canvas").html('');
  });
});
/* popup map start === */

.get-direction {
  cursor: pointer;
  text-decoration: underline;
}
#location-map {
  background: rgba(7, 50, 79, 0.8) none repeat scroll 0 0;
  display: none;
  height: 100%;
  left: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
#location-map .close-map {
  margin: 5% auto 0;
  overflow: hidden;
  text-align: right;
  width: 90%;
}
#location-map .close-map span {
  background-color: #e67e22;
  border-radius: 3px 3px 0 0;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1em;
  padding: 5px;
}
#location-map #map-canvas {
  height: 80%;
  margin: 0 auto;
  width: 90%;
}
.gm-style {
  font-family: Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
}
#directions-control {
  background-color: #fff;
  display: none;
  padding: 0 10px 30px;
  text-align: center;
  width: 100%;
}
#location-map #map-canvas #directions-control {
  background-color: #fff;
  display: none;
  padding: 0 10px 30px;
  text-align: center;
  width: 100%;
}
#location-map #map-canvas #directions-control p {
  font-weight: bold;
  margin: 0;
  padding: 0;
}
#location-map #map-canvas #directions-control #directions-start {
  height: 17px;
  line-height: 17px;
  margin: 0 0 5px 50px;
  width: 200px;
}
#location-map #map-canvas #directions-control #directions-submit {
  background-color: #2876aa;
  border-radius: 3px;
  border-width: 0;
  color: #fff;
  cursor: pointer;
  height: 27px;
  line-height: 27px;
  margin: 0 0 5px;
  padding: 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<h4 class="get-direction">Bhubaneswar</h4>
<div id="location-map">
  <div class="close-map"><span>Close Map</span>
  </div>
  <div id="map-canvas"></div>
  <div id="directions-display"><span class="error"></span>
  </div>
</div>
geocodezip
  • 158,664
  • 13
  • 220
  • 245
-1

You should use 

google.maps.event.trigger(mapObj, 'resize');

after the map is loaded.

Ranjith S
  • 205
  • 1
  • 5