Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 388
Satch3000 Avatar asked Sep 17 '25 18:09

Satch3000


1 Answers

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"
     });
} 
like image 104
Jorge Avatar answered Sep 20 '25 08:09

Jorge