CODEWITHSUNDEEP
javascripthtmlgoogle-maps-api-3google-places-apiw3c-geolocation
user1543582
user1543582

Reputation: 13

Combining google places api, and directions-map api v3

I have the following code in my page (based at the moment around the google examples. I have however hit a snag, i can't seem to make places work (the markers wont show), this is my code . . . it should show all cafes, restaurants and dars within 10km's of the users location with geolocation, it also gives directions to Darwin in Australia from the users current position.

this is the code: 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Directions Complex</title>
    <style>

    html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

  #map_canvas {
    height: 650px;
  }

      #directions-panel {
        height: 100%;
        float: right;
        width: 390px;
        overflow: auto;
      }

      #map-canvas {
        margin-right: 400px;
      }

      #control {
        background: #fff;
        padding: 5px;
        font-size: 14px;
        font-family: Arial;
        border: 1px solid #ccc;
        box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
        display: none;
      }

      @media print {
        #map-canvas {
          height: 500px;
          margin: 0;
        }

        #directions-panel {
          float: none;
          width: auto;
        }
      }

.gmnoprint {display:none;}
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
    <script>
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var a;
      var b;
      var latandlon;

      function initialize()
       {
        navigator.geolocation.getCurrentPosition(create_a_var);
       }

      function create_a_var(position)
       {

        a = position.coords.latitude;

        b = position.coords.longitude;

        latandlon = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

        loadmapscript();

       }

      function loadmapscript() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var mapOptions = {
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: new google.maps.LatLng(a, b),
          disableDefaultUI: true
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directions-panel'));

        var control = document.getElementById('control');
        control.style.display = 'block';
        map.controls[google.maps.ControlPosition.TOP].push(control);

        var request = {
        location: latandlon,
        radius: 10000,
        types: ['bar', 'restaurant', 'cafe']
        };


      }

      function calcRoute() {
        var start = latandlon;
        var end = "Darwin, NT, Australia";
        var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING,
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
      }

      function createMarker(place) {
      var placeLoc = place.geometry.location;
      var marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location
      });

      google.maps.event.addListener(marker, 'click', function() {
      alert(place.name);
      });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="control">
      <strong>Start:</strong>
      <button id="start" onclick="calcRoute();">Click Me Please :)</button>
    </div>
    <div id="directions-panel"></div>
    <div id="map_canvas"></div>
  </body>
</html>

var directionDisplay; var directionsService = new google.maps.DirectionsService(); var a; var b; var latandlon; var map; function initialize() { navigator.geolocation.getCurrentPosition(create_a_var); }

  function create_a_var(position)
   {

    a = position.coords.latitude;

    b = position.coords.longitude;

    latandlon = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    loadmapscript();

   }

  function loadmapscript() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: new google.maps.LatLng(a, b),
      disableDefaultUI: true
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions-panel'));

    var control = document.getElementById('control');
    control.style.display = 'block';
    map.controls[google.maps.ControlPosition.TOP].push(control);

    var request2 = {
    location: latandlon,
    radius: 10000,
    types: ['bar', 'restaurant', 'cafe']
    };

  }

  function calcRoute() {
    var start = latandlon;
    var end = "Darwin, NT, Australia";
    var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }

  function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
  map: map,
  position: place.geometry.location
  });

  google.maps.event.addListener(marker, 'click', function() {
  alert(place.name);
  });
  }

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

Upvotes: 0

Views: 1750

Answers (1)

duncan
duncan

Reputation: 31912

'map' is a local variable to your loadmapscript function. You then try to refer to it in your createMarker function, which doesn't have access to that variable. Make map a global variable instead.

Delete the trailing comma at the end of the TravelMode line here. This will throw an error on Internet Explorer:

 var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING,
        };

You have a createMarker function, but nothing in your code is calling that function.... therefore no markers.

Upvotes: 2

Related Questions