0

i want to show google map to my user on web page , but it should be disable for user interaction initially, when he click a button map become enable and he/she can interact with the map.

The Computer Scientist
  • 130
  • 15

1 Answers1

1
var showMap = $('#show-map');

function initialize() {
var mapOptions = {
    center: { lat: 0, lng: 0 },
    zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

$(document).ready(function(){
$('#show-map').on('click',initialize)
});

Demo

Ranjan
  • 929
  • 1
  • 6
  • 19
  • i want to show map but in disable state, after button click it becomes enable – The Computer Scientist Jul 27 '16 at 07:09
  • You can put a static image for temporary disable or you can use some text like that "click here to enable map" its a better idea. http://fiddle.jshell.net/cancerian73/T7jLf/20/?utm_source=website&utm_medium=embed&utm_campaign=T7jLf – Ranjan Jul 27 '16 at 07:26
  • Or follow this one http://stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture – Ranjan Jul 27 '16 at 07:27
  • Or you can disable this div using jquery. – Ranjan Jul 27 '16 at 07:28
  • actually i am showing a location on map to user , if he want to change the location he press edit button map becomes enable and change the location. – The Computer Scientist Jul 27 '16 at 07:33
  • http://stackoverflow.com/questions/10721552/jquery-how-to-show-a-hidden-div – Ranjan Jul 27 '16 at 07:33