Failed to load Google Maps API using geolocation
I've followed the documentation on Google itself regarding the Maps API and other sources to try and figure out what's wrong, but after hours of trying it still doesn't work.
Can anyone help me with this issue?
<div class="generatedMap"></div>
<div class="generatedMap"></div>
<script src="//maps.googleapis.com/maps/api/js?v=3&client=gme-KEYFROMGOOGLEAPI" type="text/javascript"></script>
<script type="text/javascript">
function initMap() {
/*var latlng = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(latitude, longitude)
}
map = new google.maps.Map(document.getElementById('generatedMap'), mapOptions);*/
var latitudeHF = document.getElementById("<%=HF_Latitude.ClientID %>");
var longitudeHF = document.getElementById("<%=HF_Longitude.ClientID %>");
var latitude = 0.0;
var longitude = 0.0;
if (latitudeHF)
{
latitude = latitudeHF.value;
}
if (longitudeHF) {
longitude = longitudeHF.value;
}
var map = new google.maps.Map(document.getElementById('generatedMap'), {
zoom: 8,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map,
title: "<div style = 'height:60px;width:150px'><b>Consumer location:</b><br />Latitude: " + latitude + "<br />Longitude: " + longitude
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
I am actually fetching the stored latitude and longitude from my database and then storing it in a HiddenField and retrieving it from there.
foreach (DataRow r in ds.Tables[0].Rows)
{
accountDB = r["AccountStatus"].ToString();
latitudeDB = Convert.ToDouble(r["Latitude"]);
longitudeDB = Convert.ToDouble(r["Longitude"]);
usernameDB = r["Username"].ToString();
ipDB = r["IPAddressOfCreation"].ToString();
}
HF_Latitude.Value = latitudeDB.ToString();
HF_Longitude.Value = longitudeDB.ToString();
I removed the Google Map API key for illustration purposes.
I got both latitude and longitude as shown in the picture, but I cannot show the map.
Appreciate any help please!
source to share
The error in your code is in the Div tag instead class
you need to define id
both attributes.
This is best for this script src for google map.
<script src="https://maps.googleapis.com/maps/api/js?key=Google-api-key&callback=initMap" />
Once you use the above script src remove that line from your code.
google.maps.event.addDomListener(window, 'load', initMap);
Instead
<div class="generatedMap"></div>
Should be:
<div id="generatedMap"></div>
The Javascript code will remain as it is. if you want to keep the class as it is then use the reversal code in javascript
Instead
var map = new google.maps.Map(document.getElementById('generatedMap')
Should be:
var map = new google.maps.Map(document.getElementsByClassName('generatedMap')
Hope it helps.
source to share