CODEWITHSUNDEEP
javascriptasp.net-mvcgoogle-mapsrazorgoogle-maps-api-3
Assaf Our
Assaf Our

Reputation: 639

google maps doesn't show map and does not show markers

I'm trying to put markers base on latitude and longitude on google maps that are store in my Db.

But I'm not viewing a map on my page and no markers.

Can't figure out what is the problem here.

I have console.log the markers & the results is an object I'm not sure if it should be so.

@if (item.Longitude != null)
    {
        <span class="js-latmaps">   @item.Latitude</span>
        <span class="js-longmaps">   @item.Longitude</span>
    }
    <div id="dvMap" style="width: 500px; height: 500px">
</div>

@section scripts {
    <script src="http://maps.google.com/maps/api/js?key=<"LONG_NUMBER">libraries = places"></script> 

<script type = "text/javascript">

        var markers = [
            {
                "lat": $('.js-latmaps'),
                "lng": $('.js-longmaps')
            }
        ];
        console.log(markers);
        window.onload = function() {
            var mapOptions = {
                center: new window.google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 8,
                mapTypeId: window.google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new window.google.maps.InfoWindow();
            var map = new window.google.maps.Map(document.getElementById("dvMap"), mapOptions);
            for (var i = 0; i < markers.length; i++) {
                var data = markers[i];
                var myLatlng = new window.google.maps.LatLng(data.lat, data.lng);
                var marker = new window.google.maps.Marker({
                    position: myLatlng,
                    map: map

                });
                (function(marker, data) {
                    window.google.maps.event.addListener(marker,
                        "click",
                        function(e) {
                            infoWindow.setContent(data.description);
                            infoWindow.open(map, marker);
                        });
                })(marker, data);
            }
        };
    </script>}

https://jsfiddle.net/9z6t2m3q/

Upvotes: 0

Views: 472

Answers (1)

AlexB
AlexB

Reputation: 7416

Just replace

<script src="http://maps.google.com/maps/api/js?key=<"LONG_NUMBER">libraries = places"></script>

by

<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&libraries=places></script>

Please note :

  • To remove the <> around your API_KEY
  • To add an & between your API_KEY and libraries=places
  • To replace libraries = places by libraries=places (no space)

Upvotes: 1

Related Questions