javascript - how to show google map in webpage using jquery - Stack Overflow

admin管理员组

文章数量:1415139

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="">
    </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>>

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./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>>

• javascript
• html
• google-maps

Share Improve this question Follow asked Feb 11, 2016 at 6:14 gaurav bhattgaurav bhatt 2322 silver badges1212 bronze badges 3

• did u check any error in console? – Banik Commented Feb 11, 2016 at 6:21
• yes i did but there is no error, i m getting the value in map variable but i didn't understand how should i use the var map to make this code work – gaurav bhatt Commented Feb 11, 2016 at 6:29
• My code is working properly now....i was missing style in my div....thnku – gaurav bhatt Commented Feb 11, 2016 at 6:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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

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

src="http://maps.googleapis./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.

本文标签： javascripthow to show google map in webpage using jqueryStack Overflow