HTML embedding map

• 

  emoryaq · Member · Sep 20, 2018 at 4:31 pm

  • Copy link
  • Add topic to favorites

  I’m trying to embed a Google Fusion Table, but the code isn’t generating a map, its appearing on the web page as text.

  The code is:

  Data Log-Location – Google Fusion Tables

  html, body, #googft-mapCanvas {
  height: 300px;
  margin: 0;
  padding: 0;
  width: 500px;
  }

  https://maps.google.com/maps/api/js?v=3

  function initialize() {
  var isMobile = (navigator.userAgent.toLowerCase().indexOf(‘android’) > -1) ||
  (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
  if (isMobile) {
  var viewport = document.querySelector(‘meta[name=viewport]’);
  viewport.setAttribute(‘content’, ‘initial-scale=1.0, user-scalable=no’);
  }
  var mapDiv = document.getElementById(‘googft-mapCanvas’);
  mapDiv.style.width = isMobile ? ‘100%’ : ‘500px’;
  mapDiv.style.height = isMobile ? ‘100%’ : ‘300px’;
  var map = new google.maps.Map(mapDiv, {
  center: new google.maps.LatLng(33.791522008821154, -84.32721400000003),
  zoom: 18,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById(‘googft-legend-open’));
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById(‘googft-legend’));

  layer = new google.maps.FusionTablesLayer({
  map: map,
  heatmap: { enabled: false },
  query: {
  select: ‘col1’,
  from: ‘1aWtStR4ZJVe1wEiFc8xZBP8IAkv74gGsZQ-Q6dT5’,
  where: ”
  },
  options: {
  styleId: 2,
  templateId: 2
  }
  });

  if (isMobile) {
  var legend = document.getElementById(‘googft-legend’);
  var legendOpenButton = document.getElementById(‘googft-legend-open’);
  var legendCloseButton = document.getElementById(‘googft-legend-close’);
  legend.style.display = ‘none’;
  legendOpenButton.style.display = ‘block’;
  legendCloseButton.style.display = ‘block’;
  legendOpenButton.onclick = function() {
  legend.style.display = ‘block’;
  legendOpenButton.style.display = ‘none’;
  }
  legendCloseButton.onclick = function() {
  legend.style.display = ‘none’;
  legendOpenButton.style.display = ‘block’;
  }
  }
  }

  google.maps.event.addDomListener(window, ‘load’, initialize);

  The blog I need help with is: (visible only to logged in users)

• 

  emoryaq · Member · Sep 20, 2018 at 4:32 pm

  • Copy link

  Update: all the code didn’t post so here it is:

  
  

  https://maps.google.com/maps/api/js?v=3

  function initialize() {
  var isMobile = (navigator.userAgent.toLowerCase().indexOf(‘android’) > -1) ||
  (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
  if (isMobile) {
  var viewport = document.querySelector(“meta[name=viewport]”);
  viewport.setAttribute(‘content’, ‘initial-scale=1.0, user-scalable=no’);
  }
  var mapDiv = document.getElementById(‘googft-mapCanvas’);
  mapDiv.style.width = isMobile ? ‘100%’ : ‘500px’;
  mapDiv.style.height = isMobile ? ‘100%’ : ‘300px’;
  var map = new google.maps.Map(mapDiv, {
  center: new google.maps.LatLng(33.791522008821154, -84.32721400000003),
  zoom: 18,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById(‘googft-legend-open’));
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById(‘googft-legend’));

  layer = new google.maps.FusionTablesLayer({
  map: map,
  heatmap: { enabled: false },
  query: {
  select: “col1”,
  from: “1aWtStR4ZJVe1wEiFc8xZBP8IAkv74gGsZQ-Q6dT5”,
  where: “”
  },
  options: {
  styleId: 2,
  templateId: 2
  }
  });

  if (isMobile) {
  var legend = document.getElementById(‘googft-legend’);
  var legendOpenButton = document.getElementById(‘googft-legend-open’);
  var legendCloseButton = document.getElementById(‘googft-legend-close’);
  legend.style.display = ‘none’;
  legendOpenButton.style.display = ‘block’;
  legendCloseButton.style.display = ‘block’;
  legendOpenButton.onclick = function() {
  legend.style.display = ‘block’;
  legendOpenButton.style.display = ‘none’;
  }
  legendCloseButton.onclick = function() {
  legend.style.display = ‘none’;
  legendOpenButton.style.display = ‘block’;
  }
  }
  }

  google.maps.event.addDomListener(window, ‘load’, initialize);

  </head>

  <body>

  </body>
  </html>

• 

  kokkieh · Staff · Sep 21, 2018 at 7:51 am

  • Copy link

  Hi there,

  The code you posted in your second reply is the code for an entire, complete website. You cannot embed an entire website inside a WordPress.com site, and JavaScript code can only be embedded on WordPress.com sites on our Business Plan.

  The only option to embed Google maps on WordPress.com is the one found here:

  Embed From Google Maps

• 

  emoryaq · Member · Sep 21, 2018 at 1:16 pm

  • Copy link

  The other code that’s provided by Google fusion table is:

  https://fusiontables.google.com/embedviz?q=select+col1+from+1aWtStR4ZJVe1wEiFc8xZBP8IAkv74gGsZQ-Q6dT5&viz=MAP&h=false&lat=33.791522008821154&lng=-84.32721400000003&t=1&z=18&l=col1&y=2&tmplt=2&hml=ONE_COL_LAT_LNG

  but when I paste that into the html editor it also shows up on the website as a link.

• 

  staff-zinnia · Staff · Sep 21, 2018 at 3:48 pm

  • Copy link

  Is it just the map that you need to embed on the site?