CODEWITHSUNDEEP
javascriptphpjqueryhtmlgoogle-maps
Nishan Weerasinghe
Nishan Weerasinghe

Reputation: 349

Pass Latitude and Longitude to a javascript function and get a view from the google map

I'm implementing a PHP website using weather data. I want to know how to pass latitude and longitude values from an HTML element with a JavaScript onClick event. I have used this code to get Google maps:

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   <style type="text/css">
     html { height: 100% }
     body { height: 100%; margin: 0; padding: 0 }
     #map_canvas { height: 100% }
   </style>
   <script type="text/javascript"  src="http://maps.googleapis.com/maps/api/js?key*****************&sensor=true"></script>
   <script type="text/javascript">
      function initialize() {
         var myOptions = {
         center: new google.maps.LatLng(-34.397, 150.644),
         zoom: 8,
         mapTypeId: google.maps.MapTypeId.ROADMAP
       };
       var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    }
   </script>
</head>
<body>
   <p onClick="initialize()">Search</p>
   <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

In the above code, the latitude and longitude coordinates are inside the JavaScript function. But, I want the HTML paragraph tag like:

<p onClick=".....">6.234235, 34.234345</p>

And I want to pass above values as a URl like:

https://www.google.lk/maps/@[lat],[long]

Does anyone know how to pass a URL like this to the above function?

Upvotes: 1

Views: 5623

Answers (3)

Keith
Keith

Reputation: 371

This is a little late, but I stumbled on this while searching my own answer. I found my solution based on what I learned here:

In Markup:

<div id="map" data-lat="<?php echo $locationInfo[0]['lat']; ?>" data-lon="<?php echo $locationInfo[0]['lng']; ?>"></div>

In Javascript:

var themap = document.getElementById('map');

    //console.log('lat: ' +themap.dataset.lat);
    //console.log('lon: ' +themap.dataset.lon);
    var myOptions = {
    center: new google.maps.LatLng(themap.dataset.lat, themap.dataset.lon),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

I haven't tested it in your code, but this works for me.

Upvotes: 1

rrr
rrr

Reputation: 303

One possible way could be gathering the coords from the <p> node and parse them to the Google Maps Initialize function.

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   <style type="text/css">
     html { height: 100% }
     body { height: 100%; margin: 0; padding: 0 }
     #map_canvas { height: 100% }
   </style>
   <script type="text/javascript"  src="http://maps.googleapis.com/maps/api/js?key*****************&sensor=true"></script>
   <script type="text/javascript">
      function initialize() {
         var coords = document.getElementById('coords').innerHTML.split(",");
         var lat = coords[0];
         var lng = coords[1];

         var myOptions = {
         center: new google.maps.LatLng(lat, lng),
         zoom: 8,
         mapTypeId: google.maps.MapTypeId.ROADMAP
       };
       var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

       var myMarkerLatlng = new google.maps.LatLng(lat,lng);
       var marker = new google.maps.Marker({
           position: myMarkerLatlng,
           map: map,
           title: 'Hello World!'
       });
    }
   </script>
</head>
<body>
   <p onClick="initialize()">Search</p>
     <p id="coords" onClick="initialize()">6.234235, 34.234345</p>
   <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Upvotes: 3

hotforfeature
hotforfeature

Reputation: 2588

To get the values from the p tag, and an ID to it and include this in your initialize() function:

var latLng = document.getElementById('yourId').innerHTML.split[', '];
    var myOptions = {
    center: new google.maps.LatLng(latLng[0], latLng[1]),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

If you've got multiple p tags with different locations that users can click, set up an event listener and call getSource() on the event object instead of document.getElementById().

Upvotes: 0

Related Questions