S.M_Emamian February 2016

google map not showing up my location

I would like to show a location on google map, but I don't know where is my wrong. not showing any thing :

   <div id="map-canvas" style="width:100%; height:300px;">

   </div>

.
.
.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
      <script>
            // Google map
            if ($('#map-canvas').length) {
                        var
                        GOOGLE_MAP_LAT = 40.7564971,
                        GOOGLE_MAP_LNG = -73.9743277;
                var map,
                        service;
                jQuery(function($) {
                    $(document).ready(function() {
                        var latlng = new google.maps.LatLng(GOOGLE_MAP_LAT, GOOGLE_MAP_LNG);
                        var myOptions = {
                            zoom: 14,
                            center: latlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };

                        map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);


                        var marker = new google.maps.Marker({
                            position: latlng,
                            map: map
                        });
                        marker.setMap(map);


                        $('a[href="#google-map-tab"]').on('shown.bs.tab', function(e) {
                            google.maps.event.trigger(map, 'resize');
                            map.setCenter(latlng);
                        });
                    });
                });
            }

        </script>
</body>

updated

my console messages :

Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.js:1:0
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.[Learn More] <unknown>
Synt        

Answers


Azeez Kallayi February 2016

I think you need include jquery library, because you are using $(document).ready(function() . I have updated your code by adding jquery library. Please try the below code , hope it will work.

    <div id="map-canvas" style="width:100%; height:300px;">

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        // Google map
        if ($('#map-canvas').length) {
                    var
                    GOOGLE_MAP_LAT = 40.7564971,
                    GOOGLE_MAP_LNG = -73.9743277;
            var map,
                    service;
            jQuery(function($) {
                $(document).ready(function() {
                    var latlng = new google.maps.LatLng(GOOGLE_MAP_LAT, GOOGLE_MAP_LNG);
                    var myOptions = {
                        zoom: 14,
                        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);


                    var marker = new google.maps.Marker({
                        position: latlng,
                        map: map
                    });
                    marker.setMap(map);


                    $('a[href="#google-map-tab"]').on('shown.bs.tab', function(e) {
                        google.maps.event.trigger(map, 'resize');
                        map.setCenter(latlng);
                    });
                });
            });
        }

    </script>

Post Status

Asked in February 2016
Viewed 3,601 times
Voted 5
Answered 1 times

Search




Leave an answer