Home/ Questions/Q 6932155
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T11:40:12+00:00

I am trying to make a website using Google API V3 to show your

  • 0

I am trying to make a website using Google API V3 to show your current location and nearby restaurants or cafes..
I tried this code on google’s tutorial but i cant get that this api will show my current position on the map
here is the code:
there is a pyrmont and i can change it with another latitude and longitude but i could not make it useful with navigator.geolocation.getCurrentPosition();
Thanks

AND i know there is this code: but i dont know how to use the get position out of it…

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>

<script type="text/javascript">
  var map;
  var infowindow;

if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(success, error);
    } else {
      alert('geolocation not supported');
    }

    function success(position) {
      alert(position.coords.latitude + ', ' + position.coords.longitude);
    }

    function error(msg) {
      alert('error: ' + msg);
    }

  function initialize() {
    var pyrmont = new google.maps.LatLng(48.195201,16.369547);

    map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: pyrmont,
      zoom: 15
    });

    var request = {
      location: pyrmont,
      radius: 500,
      types: ['cafe']
    };
    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.search(request, callback);
  }

  function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
      }
    }
  }

  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() {
      infowindow.setContent(place.name);
      infowindow.open(map, this);
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    EDITED.

    So, the search function was returning zero results on my actual location, so when I offset my actual location to be closer to your original (since I don’t know the density of results matching your query) it works for me. You’ll have to edit the 6.6 and 89.45 to see it work, but then you’ll need to do something with the search itself if you want it to be useful

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#map_canvas{width:500px;height:500px;}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
<script type="text/javascript">
  var map;
  var infowindow;

  function initialize(position) {
    //var pyrmont = new google.maps.LatLng(48.195201,16.369547);
    var pyrmont = new google.maps.LatLng(position.coords.latitude+6.6,position.coords.longitude+89.45);
    map = new google.maps.Map(document.getElementById('map_canvas'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: pyrmont,
      zoom: 15
    });
    var a = new google.maps.Marker({position: pyrmont,map: map,icon:'http://www.blind-summit.co.uk/wp-content/plugins/google-map/images/marker_blue.png'});
    var request = {
      location: pyrmont,
      radius: 500,
      types: ['cafe']
    };
    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.search(request, callback);
  }

  function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
      }
    }
    if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS){
   alert('zero results near this location');
    }
  }

  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() {
      infowindow.setContent(place.name);
      infowindow.open(map, this);
    });
  }

  google.maps.event.addDomListener(window, 'load', function(){
      navigator.geolocation.getCurrentPosition(initialize);
  });
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
    • 0