Google Maps working on Local but not working when hosted in Server

Last Reply 28 days ago By Mudassar

Posted 29 days ago

Get Latitude and Longitude of Mobile Browser on Server Error ASP.Net

Sample sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (p) {
        var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
        var mapOptions = {
            center: LatLng,
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        var marker = new google.maps.Marker({
            position: LatLng,
            map: map,
            title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
        });
        google.maps.event.addListener(marker, "click", function (e) {
            var infoWindow = new google.maps.InfoWindow();
            infoWindow.setContent(marker.title);
            infoWindow.open(map, marker);
        });
    });
} else {
    alert('Geo Location feature is not supported in this browser.');
}
</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
</body>
</html>

Output on localhost https://upload.i4th.in.th/thumb/thumb_178544.png

Output on server https://upload.i4th.in.th/thumb/thumb_178545.png

You are viewing reply posted by: Mudassar 28 days ago.
Posted 28 days ago

API Key of Google is missing.

You need to get a API Key for Google Maps.

Follow these steps to get an API key:
  1. Go to the Google Cloud Platform Console.
  2. Create or select a project.
  3. Click Continue to enable the API.
  4. On the Credentials page, get an API key. ...
  5. From the dialog displaying the API key, select Restrict key to set a browser restriction on the API key.

Get API Key | Maps Embed API | Google Developers

https://developers.google.com/maps/documentation/embed/get-api-key