JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="myDiv" class="col-md-4 hidden-xs"
style="padding-left: 7px; background-color: white;">
<div class="row"
style="margin-left: 30px; margin-top: 36px; background-color: white;">
<div id="hideMap" class="col-md-5" onClick="hideMap()">Hide</div>
<div id="showMap" class="col-md-5" onClick="populateMap()">Show</div>
</div>
<div id="myMap" style="width: 380px; height: 400px"></div>
<div id="para"><p>This is it</p></div>
</div>
JavaScript
function hideMap() {
$("#myMap").hide();
$("#para").show();
}
function populateMap() {
$("#para").hide();
$("#myMap").show();
google.maps.event.trigger(map,'resize');
map.setCenter(centreLoc);
}
var map;
var centreLoc;
var markers = [];
var pinColor = "FE7569";
function pinImage(imagenum) {
return image = new google.maps.MarkerImage(
"http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="
+ imagenum + "|" + pinColor);
}
function initialize() {
centreLoc = new google.maps.LatLng(37.9908372,23.7383394);
var mapOptions = {
zoom : 13,
center : centreLoc,
disableDefaultUI : true,
mapTypeControlOptions : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('myMap'),
mapOptions);
hideMap();
var results = [ [ 'Pos1', 37.9908372,23.7383394 ],
[ 'Pos2', 37.89,23.7383394 ] ];
processResults(results);
}
function processResults(results) {
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
$("#marker-container").empty();
for (i = 0; i < results.length; i++) {
var place = results[i][0];
var placeLoc = new google.maps.LatLng(results[i][1], results[i][2]);
// Create a marker for each place.
var marker = new google.maps.Marker({
map : map,
title : place,
position : placeLoc,
icon : pinImage(i + 1)
});
markers.push(marker);
var description = $("<div class='marker-description'><image class='marker' src='" + marker.icon.url + "'></image><span class='place'>"
+ place + "</span>");
...