Load a google map with coordinates that is obtained from ajax jquery
<p>I am having a html page.Initially the data of markers and map and points are coming from controller and below is the corresponding view where in the div 'map' the map is displayed</p>

<pre><code>&lt;script&gt;
  function getcoordinates(){
  //to get coordinates using ajax jquery(latitude,longitude)
 }
&lt;/script&gt;
    &lt;?php echo $map['js']; ?&gt;
    &lt;input type="text" id="myPlaceTextBox"/&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
    &lt;input type="text" id="text_id" placeholder="Search id"/&gt;
    &lt;input type='button' name='search_id' value='Search' onClick='getcoordinates()'/&gt;
    &lt;div id='map' style="width:100%; height:100%;"&gt;&lt;?php echo $map['html']; ?&gt;&lt;/div&gt;
</code></pre>

<p>the div 'map' is already being used to show the map when the page loads.There is also a search with onClick that calls the getcoordinates() function and get the coordinates.I need to reload the map with the new coordinates in the same div 'map'.</p>

<p>I have written the below function which is called from ajax success block but map doesnt seem to load in that div map.</p>

<pre><code>function initialize(lat,lng) {
   var mapOptions = {
    center: new google.maps.LatLng(lat,lng), //assign Seprately
    zoom: 8,
    scrollwheel: false
};
document.getElementById('map').style.display="block";
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var customMarker = new google.maps.Marker({
    position: new google.maps.LatLng(lat,lng),
    map: map,
    icon: 'http://maps.google.com/mapfiles/ms/micons/red.png'
});
alert("loading completed");
} 
</code></pre>