Google Maps will not show inside my div id="map"

Question

Google Maps will not show inside my div id="map"

900 Views Asked by GGstudent At 25 April 2025 at 00:16

I am following a tutorial that can locate a friend (their mobile) and pinpoint them on a Google map. All was going well including getting my coordinates and printing them to screen and putting them inside my <div id="location"></div> but now I am trying to take those coords and mark them on a map but I cant get the map to show. I'm sure my functions are set up wrong somehow but I can't work it out. Any clues?

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>   
    <script src="scripts/jquery.ui.map.js"></script>

    <script>
        $(document).ready(function(){
            navigator.geolocation.getCurrentPosition(useposition); 
        });
    </script>

    <script>
        function useposition(position){  
                lat = position.coords.latitude;
                lon = position.coords.longitude;  
                $("#location").html('Lat: ' + lat + '<br />Lon: ' + lon);           
                };  

        function deviceposition(position){  
                $("#map").gmap({'center': deviceposition, 'zoom': 12, 'disableDefaultUI': true,          'mapTypeId': 'terrain'}).bind('init', function(ev, map) { themap = map;});

                $('#map').gmap('addMarker', { 'id': 'client', 'position': deviceposition, 'bounds': true 
                });     
              }             
    </script>
</head>
<body>
    <div id="location"></div>   

    <div id="map" style="width:400px; height:400px"></div>        

<!-- This is supposed to be filled with the Google Map coords -->

</body>
</html>

Original Q&A

There are 1 best solutions below

**AniV** · Answer 1

I have tried passing div in CreateElement() method and then assigning the values to a variable mapcanvas. This whole declaration is inside a method which is called in this particular line:

 navigator.geolocation.getCurrentPosition(success);

I am sharing the whole code..

 <script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '600px';

document.querySelector('article').appendChild(mapcanvas);

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

var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
    style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

var marker = new google.maps.Marker({
  position: coords,
  map: map,
  title:"You are here!"
});
}

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}

</script>

Hope this would help!!!

Google Maps will not show inside my div id="map"

There are 1 best solutions below

Related Questions in GOOGLE-MAPS

Related Questions in GOOGLE-GEOLOCATION

Trending Questions

Popular # Hahtags

Popular Questions