Get this content (google maps V3 api) into WordPress page?

  • Here is the test page. It loads the directions below the map in a Div.
    https://web.me.com/zumajoe/directions/index.html

    The above example was taken directly from Google Maps API 3 samples and I cannot get it to work on creating a new page in WordPress (even on the default theme) pasting the code inside “HTML”. The map won’t even show up.

    What would you say the best procedure to integrating my example page into wordpress?

    <html>
<head>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<body onload="document.body.focus()" onkeyup="keypressed()">

<style>
body {
  font-size: 0.8em;
}

#map-container, #side-container, #side-container li {
  /*float: left;*/
}

#map-container {
  width: 900px;
  height: 300px;
}

#dir-container {
  overflow: auto;
  padding: 2px 4px 2px 0;
  width: 900px;

}
#dir-container table {
  font-size: 1em;
  width: 100%;
}
</style>
From:
<input id="from-input" type=text value="San Francisco, CA"/>
<select onChange="Demo.getDirections();" id="travel-mode-input">
  <option value="driving" selected="selected">By car</option>
      <option value="bicycling">Bicycling</option>
      <option value="walking">Walking</option>
</select>
<input onClick="Demo.getDirections();" type=button value="Go!"/></form>

<div id="map-container"></div>

<div id="dir-container"></div>

<script type="text/javascript">

var blackBeards = new google.maps.LatLng(34.242, -119.265);

 function keypressed(){
if(event.keyCode=='13'){Demo.getDirections();}
}

var Demo = {
  // HTML Nodes
  mapContainer: document.getElementById('map-container'),
  dirContainer: document.getElementById('dir-container'),
  fromInput: document.getElementById('from-input'),

  travelModeInput: document.getElementById('travel-mode-input'),
  unitInput: document.getElementById('unit-input'),

  // API Objects
  dirService: new google.maps.DirectionsService(),
  dirRenderer: new google.maps.DirectionsRenderer(),
  map: null,

  showDirections: function(dirResult, dirStatus) {
    if (dirStatus != google.maps.DirectionsStatus.OK) {
      alert('Directions failed: ' + dirStatus);
      return;
    }

    // Show directions
    Demo.dirRenderer.setMap(Demo.map);
    Demo.dirRenderer.setPanel(Demo.dirContainer);
    Demo.dirRenderer.setDirections(dirResult);
  },

  getSelectedTravelMode: function() {
    var value =
        Demo.travelModeInput.options[Demo.travelModeInput.selectedIndex].value;
    if (value == 'driving') {
      value = google.maps.DirectionsTravelMode.DRIVING;
    } else if (value == 'bicycling') {
      value = google.maps.DirectionsTravelMode.BICYCLING;
    } else if (value == 'walking') {
      value = google.maps.DirectionsTravelMode.WALKING;
    } else {
      alert('Unsupported travel mode.');
    }
    return value;
  },

  getSelectedUnitSystem: function() {

        google.maps.DirectionsUnitSystem.IMPERIAL;
  },

  getDirections: function() {
    var fromStr = Demo.fromInput.value;

    var dirRequest = {
      origin: fromStr,
      destination: blackBeards,
      travelMode: Demo.getSelectedTravelMode(),
      unitSystem: Demo.getSelectedUnitSystem(),
      provideRouteAlternatives: true
    };
    Demo.dirService.route(dirRequest, Demo.showDirections);

  },

  init: function() {
    var latLng = new google.maps.LatLng(34.242, -119.265);

    Demo.map = new google.maps.Map(Demo.mapContainer, {
      zoom: 13,
      center: latLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP

    });

    // Show directions onload
  Demo.getDirections();

  }

};

// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', Demo.init);
</script>
</body>
</html>

    Official Google API examples

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Get this content (google maps V3 api) into WordPress page?’ is closed to new replies.