CODEWITHSUNDEEP
asp.net-mvcgoogle-maps
Davood
Davood

Reputation: 5635

How to show google map in MVC?

I want to show Google map on my website and my codes are below but after my page loaded in browser i got this error:

Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for  
technical details.

I looked at it in Chrome and found this:

Google Maps API error: MissingKeyMapError 
https://developers.google.com/maps/documentation/javascript/error-
messages#missing-key-map-error

what is MissingKeyMap?

my codes:

in header tag:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<link href="~/Content/Site.css" rel="stylesheet" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?
 sensor=false"></script>


<script type="text/javascript">

    function initialize() {

        var canvas = $("#map_canvas");

        var latitude = 35.78334;
        var longitude = 51.42511;

        var latlng = new google.maps.LatLng(latitude, longitude);
        var options = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(canvas[0], options);

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(latitude, longitude),
            map: map
        });
    }

    $(function () {
        initialize();
    });

  </script>

On my view :

<div style="width: 100%; height: 100%">
    <div id="map_canvas" style="width:100%; height:100%; margin-left:   100px"></div>
 </div>

Upvotes: 4

Views: 14446

Answers (2)

ViVi
ViVi

Reputation: 4464

In your js code for google maps, you may find something like this https://maps.googleapis.com/maps/api/js?key=YOURKEYHERE&callback=initMap

Replace YOURKEYHERE with a google API key of your own. Go to this link to get a key of your own and replace it with YOURKEYHERE and it should work fine.

Upvotes: 5

Laurent Lequenne
Laurent Lequenne

Reputation: 902

It's all explained here.

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

You need to provide a api-key in the url of your javascript 

 <script async defer src="https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&callback=initMap"  type="text/javascript"></script>

Upvotes: 0

Related Questions