Find a route using Geolocation and Google Maps API

• 

  sundusnisar · Member · Jun 6, 2013 at 5:33 pm

  • Copy link
  • Add topic to favorites

  How to add the Google map in a code of wordpress.com
  I have used the following code But it prints in our website directly
  <script src=”http://maps.google.com/maps/api/js?sensor=true”></script>

  <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>

  <script>

  function calculateRoute(from, to) {

  // Center initialized to Naples, Italy

  var myOptions = {

  zoom: 10,

  center: new google.maps.LatLng(40.84, 14.25),

  mapTypeId: google.maps.MapTypeId.ROADMAP

  };

  // Draw the map

  var mapObject = new google.maps.Map(document.getElementById(“map”), myOptions);

  var directionsService = new google.maps.DirectionsService();

  var directionsRequest = {

  origin: from,

  destination: to,

  travelMode: google.maps.DirectionsTravelMode.DRIVING,

  unitSystem: google.maps.UnitSystem.METRIC

  };

  directionsService.route(

  directionsRequest,

  function (response, status) {

  if (status == google.maps.DirectionsStatus.OK) {

  new google.maps.DirectionsRenderer({

  map: mapObject,

  directions: response

  });

  }

  else

  $(“#error”).append(“Unable to retrieve your route
  “);

  }

  );

  }

  $(document).ready(function () {

  // If the browser supports the Geolocation API

  if (typeof navigator.geolocation == “undefined”) {

  $(“#error”).text(“Your browser doesn’t support the Geolocation API”);

  return;

  }

  $(“#from-link, #to-link”).click(function (event) {

  event.preventDefault();

  var addressId = this.id.substring(0, this.id.indexOf(“-“));

  navigator.geolocation.getCurrentPosition(function (position) {

  var geocoder = new google.maps.Geocoder();

  geocoder.geocode({

  “location”: new google.maps.LatLng(position.coords.latitude, position.coords.longitude)

  },

  function (results, status) {

  if (status == google.maps.GeocoderStatus.OK)

  $(“#” + addressId).val(results[0].formatted_address);

  else

  $(“#error”).append(“Unable to retrieve your address
  “);

  });

  },

  function (positionError) {

  $(“#error”).append(“Error: ” + positionError.message + “
  “);

  },

  {

  enableHighAccuracy: true,

  timeout: 10 * 1000 // 10 seconds

  });

  });

  $(“#calculate-route”).submit(function (event) {

  event.preventDefault();

  calculateRoute($(“#from”).val(), $(“#to”).val());

  });

  });

  </script>

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