Google지도 API 중심 마커 + Geolocation

마커를 배치하고 배치 할 변수를 작성하려고했지만 작동하지 않습니다. 먼저 위치 서비스를 사용하도록 설정 한 다음 마커를 사용하여 사용자의 현재 위치를 표시해야합니다. 변수 "마커"를 별도로 호출해야하는지 확신 할 수 없습니까? 또는 문법에 문제가 있습니까?Google지도 API 중심 마커 + Geolocation

내가 뭘 잘못하고 있니?

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>GMAP</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <!-- Google Maps API --> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0} 
     #map-canvas { height: 100%; margin-left:auto; margin-right:auto; } 
    </style> 

    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUuNJkdVKOzHyIclOyTki6uHwrYpKxaeg&sensor=true"> 
    </script> 

    <!-- GMaps GPS --> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script> 

    <script type="text/javascript"> 
     function initialize() { 
     var mapOptions = { 
     zoom: 6 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 

     // Try HTML5 geolocation 
     if(navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function (position) { 
      var pos = new google.maps.LatLng(position.coords.latitude, 
              position.coords.longitude); 

      var showPosition = function (position) { 
      var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
      var marker = new google.maps.Marker({ 
       position: userLatLng, 
       title: 'Your Location', 
       map: map 
      }); 

      var infowindow = new google.maps.InfoWindow({ 
       map: map, 
       position: pos, 
      }); 

      map.setCenter(pos); 
      }; 

     }); 
     } 



     else { 
     // Browser doesn't support Geolocation 
     handleNoGeolocation(false); 
     } 
    } 

     function handleNoGeolocation(errorFlag) { 
      if (errorFlag) { 
      var content = 'Error: The Geolocation service failed.'; 
      } else { 
      var content = 'Error: Your browser doesn\'t support geolocation.'; 
      } 

      var options = { 
      map: map, 
      position: new google.maps.LatLng(37.774929, -122.419416), 
      content: content 
      }; 

      var infowindow = new google.maps.InfoWindow(options); 
      map.setCenter(options.position); 
     } 



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

    </script> 
    </head> 

<body> 

    <!-- Current Location Google Map API --> 
    <br /> 
    <div id="map-canvas" style="width: 30%; height: 30%"></div> 

    </body> 
</html>

출처

2014-01-29 Phillipe Dongwoo Han

작동하지 않는 기능은 무엇입니까? 우리는 전혀 모른다. 문제를 설명하기 위해 [jsfiddle] (http://jsfiddle.net)을 만드십시오. – MrUpsidown

하나의 오류가보고됩니다 :'경고 : Google Maps API를이 페이지에 여러 번 포함 시켰습니다. 이로 인해 예기치 않은 오류가 발생할 수 있습니다. ' –

두 가지 오류가 있습니다.

Google지도 API가 두 번 포함되어 있으므로 메시지가 표시됩니다. Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors. 포함 된 링크 중 하나를 주석 처리해야합니다.

다음 번에는 showPosition() 함수가 없습니다. 거기에 전화를 걸더라도 변수가 pos 및 userLatLng을 사용해야하므로 제대로 작동하지 않습니다. 다음은 변경된 코드 :

... 
    navigator.geolocation.getCurrentPosition(function (position) { 
     //var pos = new google.maps.LatLng(position.coords.latitude, 
     //         position.coords.longitude); 

     //var showPosition = function (position) { 

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

      var marker = new google.maps.Marker({ 
       position: userLatLng, 
       title: 'Your Location', 
       map: map 
      }); 

      var infowindow = new google.maps.InfoWindow({ 
       // map: map, 
       content: 'Info for this place', 
       position: userLatLng 
      }); 

      map.setCenter(userLatLng); 
     //}; 

    }, function (err) { 
     // message if user denied geolocation 
     alert('Error(' + err.code + '): ' + err.message); 
    }); 
} else { 
...

마커에 대한 이벤트 리스너가 없기 때문에 정보창을 열 수 없습니다.

출처

2014-01-29 08:16:27

실제로 전화를 걸지 않는 것을 믿을 수 없습니다! 정말 고마워! –

showPosition 함수를 호출해야합니다. 현재는 해당 함수를 선언하고 있습니다.

출처

2014-01-29 08:03:20 Jonathan

Google지도 API 중심 마커 + Geolocation

답변

관련 문제