What could be preventing me from displaying a Google map in the second DIV ID? I attempted changing my Map_canvas to Class with the same results. I am aiming to showcase a Google map in the second Div, map_canvas. The map functions within my jQueryMobile setup, so it is crucial that I target the second Div on the display page.
Below is the code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map</title>
<script src="../../Scripts/jquery-1.8.2.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://www.google.com/jsapi"></script>
<script>
$(document).ready(function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
});
function success(position) {
debugger;
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 17,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("my_maps").children[0], options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "You are here!"
});
}
</script>
<style>
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#map_canvas {
height: 100%;
}
</style>
</head>
<body>
<div id="my_maps">
<div id="map_canvas"></div>
</div>
</body>
</html>