Ramki
Reputation: 1
Google maps api
I want to add markers in my map along with the current locations Both the programs are working perfectly when running separately but when joined, Markers is not working only The map is displaying the current location I have placed the code below and the links to two programs
first program : Marker's fiddle
second Program : Current Location's fiddle
<title>Geolocation</title>
<style>
html, body, #map {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), 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 infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} 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(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
var locations = [
['Royal hall',39.032836,-94.576413, 4],
['Student Union',39.034182,-94.581661, 5],
['Law School',39.033226,-94.58215, 3],
['Bloch School',39.033515,-94.581063, 2],
['Cherry Street',39.036222,-94.58182, 1],
['Arts and Sciences',39.036857,-94.578483,6],
['ISAO',39.036061,-94.576912,7],
['Miller Nichols',39.035365,-94.576456,8],
['Flarsheim Hall',39.034349,-94.576386,9],
['Parking structure',39.032149,-94.57637,10],
];
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][3], locations[i][2]),
map: map
});
}
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map"></div>
</body>
Please help me with a solution.
Upvotes: 0
Views: 483
