CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Satch3000
Satch3000

Reputation: 49422

Generate a google map using latitude and longitude code script

I need to generate a google map with a marker.

I have the latitude and longitude code.

There's lots of scripts around but what is the quickest way to display the map on my web page using the latitude and longitude codes that I have?

This is the current code: - No map is being displayed

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script>
    $(document).ready(function (){
         var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
         var myOptions = {
             zoom: 4,
             center: myLatlng,
             mapTypeId: google.maps.MapTypeId.ROADMAP
             }
          map = new google.maps.Map($('#map'), myOptions);
          var marker = new google.maps.Marker({
              position: myLatlng, 
              map: map,
          title:"Fast marker"
         });
    }) 
    </script>

    </head>
    <body>

    <div id="map"></div>
    </body>
    </html>

Upvotes: 4

Views: 43195

Answers (2)

Sharad Sinha
Sharad Sinha

Reputation: 31

The code is adding some invisible content to the map div. To view it, we need to add CSS:

#map { width: 500px; height: 400px; }

Upvotes: 2

Jorge
Jorge

Reputation: 18257

Markup

<script language=javascript src='http://maps.google.com/maps/api/js?sensor=false'></script>
<div id="map"></div>

Javascript

function initialize(){
     var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
     var myOptions = {
         zoom: 4,
         center: myLatlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
         }
      map = new google.maps.Map(document.getElementById("map"), myOptions);
      var marker = new google.maps.Marker({
          position: myLatlng, 
          map: map,
      title:"Fast marker"
     });
} 

google.maps.event.addDomListener(window,'load', initialize);

Jquery

$(document).ready(function (){
     var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
     var myOptions = {
         zoom: 4,
         center: myLatlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
         }
      map = new google.maps.Map($('#map'), myOptions);
      var marker = new google.maps.Marker({
          position: myLatlng, 
          map: map,
      title:"Fast marker"
     });
}

Upvotes: 8

Related Questions