CODEWITHSUNDEEP
javascripthtmlgoogle-maps
gaurav bhatt
gaurav bhatt

Reputation: 23

how to show google map in webpage using jquery

I want to display google map in page load that why i m using window.onload Function.I am passing latitude and longitude as static,and try to show in a div with an id ="map_canvas".But nothing is shown on webpage. Where M i making mistake.Here is my code.I am unable to fetch Google Map in my webpage.

Here is the java script.

<script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=true">
    </script>


    <script>

      


        window.onload = function WindowLoad(event) {
            var myLatlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 8,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }

       
      
    </script>
    
this is my Html Code.
<div id="map_canvas"></div>>

Upvotes: 0

Views: 4425

Answers (2)

Imran
Imran

Reputation: 21

You are missing the Google API key in the query parameter. Your script tag should be something like this:

src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBeEeKz4H-KQTFABe1UTs9h5KUlpqsZ10Q&sensor=false"

You can register for a free Google map API key, which gives about 10,000 free hits everyday, good enough for practice purposes.

Upvotes: 2

Banik
Banik

Reputation: 921

add height and width to the map_canvas div and then check...

<div id="map_canvas" style="width:500px;height:380px;"></div>

Upvotes: 4

Related Questions