Load google map onclick event

Question

I am using below code

function displayMapAt_map2()
{
      google.load("visualization", "1", {packages:["map"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Lat', 'Long', 'Name'],
          [-6.6,106.829635, 'Work'],
          [-6.6,106.859665, 'University'],
          [-6.6,106.849685, 'Airport'],
          [-6.6,106.839685, 'Shopping']
        ]);
 var options = {
   showTip: true,
   center: location,
   zoom: 2,
   mapType: 'normal',
   enableScrollWheel: true
 }

        var map = new google.visualization.Map(document.getElementById('map-canvas2'));
        map.draw(data,options);
      }
}

but this is not working for me

no. i just fire this event on click on add but page gets reload — Deep Garg, Dec 03 '15 at 06:48
This question was already answered. Check this out http://stackoverflow.com/questions/23404763/load-google-map-on-button-click-with-jquery — claudios, Dec 03 '15 at 06:49
but i am using different maps in three different tabs. and each map is with multiple markers and long,lats — Deep Garg, Dec 03 '15 at 06:54

score 0 · Answer 1 · answered Dec 03 '15 at 06:57

0

You need to call like this,

 <a href="#local" onClick="displayMapAt_map2(event)">add</a>

Then on the function,

function displayMapAt_map2(e)
{
      e.preventDefault();
      google.load("visualization", "1", {packages:["map"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Lat', 'Long', 'Name'],
          [-6.6,106.829635, 'Work'],
          [-6.6,106.859665, 'University'],
          [-6.6,106.849685, 'Airport'],
          [-6.6,106.839685, 'Shopping']
        ]);
    var options = {
      showTip: true,
      center: location,
      zoom: 2,
      mapType: 'normal',
      enableScrollWheel: true
    }

        var map = new google.visualization.Map(document.getElementById('map-canvas2'));
        map.draw(data,options);
      }
}

answered Dec 03 '15 at 06:57

Anoop Joshi P

25,373
8
32
53

Its not working for me. it reload the page infinitely :( – Deep Garg Dec 03 '15 at 07:06
show us the html too. Did you refer google map js in your code? – Anoop Joshi P Dec 03 '15 at 07:08
MAP2 – Deep Garg Dec 03 '15 at 07:12
google js is added. this a tag is used to changing the tab. While changing the tab i need to call map function. but it get reload the whole page – Deep Garg Dec 03 '15 at 07:13
put an alert in the function and checks if the function is getting called corrctly – Anoop Joshi P Dec 03 '15 at 07:14
what if I uncomment the mapscript? – Anoop Joshi P Dec 03 '15 at 07:23
the same. page get reload infinitely. – Deep Garg Dec 03 '15 at 07:26
are you getting the alert when you uncomment the mapscript?? – Anoop Joshi P Dec 03 '15 at 07:29
Man , then there must be some console errors. check the console first. – Anoop Joshi P Dec 03 '15 at 07:48
When the page get reloads then console get clear. How can i see if there is any error – Deep Garg Dec 03 '15 at 07:54
Sorry. but i cross checked. There is not any error in console – Deep Garg Dec 03 '15 at 09:18

score 0 · Accepted Answer · answered Dec 10 '15 at 05:03

I got answer for this. It helps me this way

      google.load("visualization", "1", {packages:["map"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Lat', 'Long', 'Name'],
          [-6.6,106.829635, 'Work'],
          [-6.6,106.859665, 'University'],
          [-6.6,106.849685, 'Airport'],
          [-6.6,106.839685, 'Shopping']
        ]);
 var options = {
   showTip: true,
   center: location,
   zoom: 2,
   mapType: 'normal',
   enableScrollWheel: true
 }

        var map = new google.visualization.Map(document.getElementById('map-canvas2'));
        map.draw(data,options);
      }
function displayMapAt_map2()
{
  drawChart();
}

Load google map onclick event

2 Answers2