I have seen this link:
Google map api v3 add polylines from array
this is somehow slightly the same as my problem.. you see, im getting a javscript error as such this:
Uncaught TypeError: Cannot call method 'getPath' of undefined
AddCoordinate map:118
(anonymous function)
well my code is basically populating the coordinates first as the page is loaded together with the map.. And by the time that click is triggered (html button), that is the only time that the map will be plotted with poly lines.. I hope I explained it very well though.. Here's what i got:
var map;
var Markers = [];
var Coordinates = [];
var LinePath;
function initialize()
{
var myLatLng = new google.maps.LatLng(21.291982, -140.821856);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var MarkerSize = new google.maps.Size(48,48);
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function AddCoordinate( lat, long ) {
var path = LinePath.getPath();
path.push( new google.maps.LatLng( lat, long ) );
LinePath.setPath(path);
}
function PlotLine()
{
LinePath = new google.maps.Polyline({
path:Coordinates,
strokeColor:"#ffffff",
strokeOpacity:1.0,
strokeWeight:5
});
LinePath.setMap(map);
}
<html>
<body onload="initialize()">
<div id="map_canvas" ></div>
<?php
foreach($arrayOfPlotPoints as $key => $value){
$longitude = round($value['longitude'],5);
$latitude = round($value['latitude'],5);
$snrLevel = $value['snr_level'];
echo '<script type="text/javascript">AddCoordinate('.$latitude.','.$longitude.')</script>';
?>
<option value="<?php echo $longitude.",".$latitude.",".$snrLevel?>"> Lg:<?php echo $longitude." Lt: ".$latitude." LV: ".$snrLevel?></option>
<?php } ?>
</select>
<br /><br />
<?php echo $this->Form->button('PLOT', array('type'=>'button', 'onclick'=>'PlotLine()')); ?>
echo $this->Form->button('PLOT', array('type'=>'button', 'onclick'=>'PlotLine()'));
?>
********EDITED**********
i have made a partial modification of my code.. however im getting the same error..
Uncaught TypeError: Cannot call method 'getPath' of undefined
AddCoordinate (anonymous function)
function initialize() {
//.....
LinePath = new google.maps.Polyline({
path:Coordinates, //san ka galing Coordinates??? dineclare ka pero di ka aman nilagyan "YATA" ng laman
strokeColor:"#ffffff",
strokeOpacity:1.0,
strokeWeight:5
});
}
function AddCoordinate( latitude, longitude ) {
var path = LinePath.getPath();
path.push( latitude, longitude );
}
function PlotLine()
{
LinePath = new google.maps.Polyline({
path:Coordinates,
strokeColor:"#ffffff",
strokeOpacity:1.0,
strokeWeight:5
});
LinePath.setMap(map);
}
<HTML>
select name="long_and_lat" id="long_and_lat" style="width:220px;height:250px;" size="100">
<?php
$plotPoints = array();
foreach($arrayOfPlotPoints as $key => $value){
$longitude = round($value['longitude'],5);
$latitude = round($value['latitude'],5);
$snrLevel = $value['snr_level'];
echo '<script type="text/javascript">AddCoordinate('.$latitude.','.$longitude.')</script>';
?>
<option value="<?php echo $longitude.",".$latitude.",".$snrLevel?>"> Lg:<?php echo $longitude." Lt: ".$latitude." LV: ".$snrLevel?></option>
<?php } ?>
</select>
<br /><br />
<?php echo $this->Form->button('PLOT', array('type'=>'button', 'onclick'=>'PlotLine()')); ?>
</html>
You are making a call to LinePath in AddCoordinate(), but LinePath isn't created until PlotLine() is called (by clicking the button).
Perhaps you could create LinePath when you declare it, then just call LinePath.setMap(map); from PlotLine().
Maybe something like this:
<html>
<head>
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var Markers = [];
var Coordinates = [];
var LinePath = new google.maps.Polyline({
path:Coordinates,
strokeColor:"#ffffff",
strokeOpacity:1.0,
strokeWeight:5
});
function initialize()
{
var myLatLng = new google.maps.LatLng(21.291982, -140.821856);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var MarkerSize = new google.maps.Size(48,48);
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function AddCoordinate( lat, long ) {
var path = LinePath.getPath();
path.push( new google.maps.LatLng( lat, long ) );
LinePath.setPath(path);
}
function PlotLine()
{
LinePath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" ></div>
<script type="text/javascript">AddCoordinate(11,12)</script>
</body>
</html>
Related
How i show multiple location in google map in Codeigniter. I have one array including latitude and longitude. I want to show all the location in map.
This is my $query array passed from controller to view page,
Array (
[0] => stdClass Object ([lat] => 37.45360256419911 [lng] => -122.16470718383789)
[1] => stdClass Object ([lat] => 37.45455646705577 [lng] => -122.1653938293457)
[2] => stdClass Object ([lat] => 37.451543303913226 [lng] => -122.16745376586914)
)
i want to show all this 3 location in my map,now it's only marking 1 location.
<script>
var map;
var marker;
var infowindow;
var messagewindow;
function initMap() {
<?php
foreach($query as $row){
$lat=$row->lat;
$lng=$row->lng;
?>
var location = {lat: <?php echo $lat; ?>, lng: <?php echo $lng; ?>};
map = new google.maps.Map(document.getElementById('map'), {
center: location,
zoom: 13
});
var marker = new google.maps.Marker({
position: location,
map: map,
});
infowindow = new google.maps.InfoWindow({
content: document.getElementById('form')
});
messagewindow = new google.maps.InfoWindow({
content: document.getElementById('message')
});
google.maps.event.addListener(map, 'click', function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
});
<?php
}
?>
}
It works fine for me...
In controller :
function latLanLocation()
{
if($this->session->userdata('logged_in'))
{
$session_data = $this->session->userdata('logged_in');
$data['title'] = 'Create client';
$ibo = $this->session->userdata['logged_in']['ibo'];
$latLanQuery = $this->db->query('select name,latitude,longitude from distributor_clients where sponsor='.$ibo.' AND status="A" AND latitude !=0 AND longitude !=0');
$userData = $latLanQuery->result_array();
$locations='[';
foreach ($userData as $key => $row) {
$name = $row['name'];
$longitude = $row['longitude'];
$latitude = $row['latitude'];
$locations .= '["'.$name.'","'.$latitude.'","'.$longitude.'"],';
}
$locations .= ']';
$data['markers'] = $locations;
$this->load->view('location', $data);
}
else
{
redirect('login', 'refresh');
}
}
//In View folder create location.php
// Html code for Google Map Javascript API
<!DOCTYPE html>
<html>
<head>
<style>
#mapCanvas {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="mapCanvas"></div>
<script>
function initMap() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
map.setTilt(50);
var markers = <?php echo $markers; ?>
// Add multiple markers to map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Place each marker on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Center the map to fit all markers on the screen
map.fitBounds(bounds);
}
// Set zoom level
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}
// Load initialize function
google.maps.event.addDomListener(window, 'load', initMap);
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>
</body>
</html>
The final output:
Not tested but you could try like this. Put the php code before and generate an array of lat,lng coordinates which you convert to json for use by the initmap function. Iterate through the object members and add a new marker.
<?php
$data=array();
foreach($query as $row){
$lat=$row->lat;
$lng=$row->lng;
$data[]=array('lat'=>$lat,'lng'=>$lng);
}
$json=json_encode( $data );
?>
<script>
var map;
var marker;
var infowindow;
var messagewindow;
<?php
echo "
var json={$json};
var lat={$lat};
var lng={$lng};
"
?>
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: location,
zoom: 13
});
infowindow = new google.maps.InfoWindow({
content: document.getElementById('form')
});
messagewindow = new google.maps.InfoWindow({
content: document.getElementById('message')
});
google.maps.event.addListener( map, 'click', function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
for( var n in json ){
var obj=json[ n ];
lat=obj.lat;
lng=obj.lng;
var location = { lat:lat, lng:lng };
var marker = new google.maps.Marker({
position: location,
map: map,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
}
</script>
Using the key you provided in the comment I get an error about an invalid key and the map refuses to load at all. Using a different key however worked fine with a couple of alterations.
My db connection is mysqli and the query and processing of recordset may or may not be the same method you chose. You need to edit this according to your needs as those details were ommited from the question.
<?php
/* emulated db connection */
include __DIR__. '/db.php';
/* get markers from a table */
$sql='select `name`,`lat`,`lng` from markers limit 20';
$result=$db->query( $sql );
?>
<!--
Original question:
https://stackoverflow.com/questions/48437784/how-i-show-multiple-location-in-google-map-codeigniter/48438084?noredirect=1#comment83871602_48438084
-->
<?php
/* generate data array & convert to json */
$data=array();
/*
foreach( $query as $row ){
}
*/
while( $row=$result->fetch_object() ){
$lat=$row->lat;
$lng=$row->lng;
$name=$row->name;
$data[]=array('name'=>$name,'lat'=>$lat,'lng'=>$lng);
}
$json=json_encode( $data );
?>
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>Google maps - display markers</title>
<script>
var map;
var marker;
var infowindow;
var messagewindow;
<?php
echo "
var json={$json};
var lat={$lat};
var lng={$lng};
"
?>
function initMap() {
var location=new google.maps.LatLng( lat,lng );
map = new google.maps.Map( document.getElementById('map'), {
center: location,
zoom: 13
});
infowindow = new google.maps.InfoWindow({
content: document.getElementById('form')
});
messagewindow = new google.maps.InfoWindow({
content: document.getElementById('message')
});
google.maps.event.addListener( map, 'click', function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
for( var n in json ){
var obj=json[ n ];
lat=obj.lat;
lng=obj.lng;
name=obj.name;
var location = new google.maps.LatLng( lat, lng );
var marker = new google.maps.Marker({
position: location,
title:name,
map: map,
});
google.maps.event.addListener( marker, 'click', function() {
var content=infowindow.getContent();
content.querySelector('input[name="lat"]').value=e.latLng.lat();
content.querySelector('input[name="lng"]').value=e.latLng.lng();
content.querySelector('input[name="name"]').value=this.title;
infowindow.open( map, this );
}.bind( marker )); /* bind to THIS marker */
}
}
</script>
<script async defer src='//maps.googleapis.com/maps/api/js?key=<API KEY>&callback=initMap'></script>
<style>
#map{
width:800px;
height:600px;
float:none;
margin:auto;
}
</style>
</head>
<body>
<div id='map'></div>
<form id='form'>
<input type='text' name='lat' />
<input type='text' name='lng' />
<input type='submit' />
</form>
<div id='message'>unknown content</div>
</body>
</html>
This code can display multi different markers. Hope this help you.
<!DOCTYPE html>
<html>
<head>
<title>Custom Markers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(-33.91722, 151.23064),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
var features = [
// do looping here and replace LatLng value using foreach PHP.
{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91539, 151.22820),
type: 'library'
},
];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
source : https://developers.google.com/maps/documentation/javascript/custom-markers
to put map in my site i follow one example and it will display static markers like.
var locations = [
['Bondi Beach', -33.890542, 151.274856],
['Coogee Beach', -33.923036, 151.259052],
['Cronulla Beach', -34.028249, 151.157507],
['Manly Beach', -33.80010128657071, 151.28747820854187],
['Maroubra Beach', -33.950198, 151.259302]
];
i want it dynamic from mysql table. it has lat and lng. i tried this but not working
<?php
$host = "localhost";
$db_name = "aarya";
$user = "root";
$password = "";
$con = mysql_connect($host,$user,$password) or die("connection error");
mysql_select_db($db_name) or die("could't connect to database");
$query="SELECT * FROM detail";
$result=mysql_query($query);
while ($row=mysql_fetch_array($result)) {
?>
var locations = [
['<?php echo $row['name'];?>','<?php echo $row['lat'];?>','<?php echo $row['lng'];?>'],
<?php
}
?>
];
i think problem in locations array and i am new in google maps please help me.
Here is a rough example of doing this:
Your locations array:
<?php
$locations[0] = array("lat"=>"-33.890542", "long"=>"151.274856", "info" => "Bondi Beach");
$locations[1] = array("lat"=>"-33.923036", "long"=>"151.259052", "info" => "Coogee Beach");
$locations[2] = array("lat"=>"-34.028249", "long"=>"151.157507", "info" => "Cronulla Beach");
$locations[3] = array("lat"=>"-33.80010128657071", "long"=>"151.28747820854187", "info" => "Manly Beach");
$locations[4] = array("lat"=>"-33.950198", "long"=>"151.259302", "info" => "Maroubra Beach");
?>
Or you could query the database like:
<?php
$query="SELECT * FROM detail";
$result=mysql_query($query);
while ($row=mysql_fetch_array($result)) {
$locations[] = array("lat"=>$row['lat'], "long"=>$row['lng'], "info" => $row['name']);
}
?>
You can modify the above array with the values from your database.
The map:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css">
body { font: normal 10pt Helvetica, Arial; }
#map { width: 350px; height: 300px; border: 0px; padding: 0px; }
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info)
{
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker(
{
position: pt,
icon: icon,
map: map
});
var popup = new google.maps.InfoWindow(
{
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function()
{
if (currentPopup != null)
{
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function()
{
map.panTo(center);
currentPopup = null;
});
}
function initMap()
{
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 0,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions:
{
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL
}
});
<?php foreach($locations AS $loc) { //you could replace this with your while loop query ?>
addMarker(<?php echo $loc["lat"]; ?>, <?php echo $loc["long"]; ?>, '<?php echo $loc["info"]; ?>');
<?php } ?>
center = bounds.getCenter();
map.fitBounds(bounds);
}
</script>
</head>
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</html>
Hope that helps :)
You are initialising var locations everytime your while loop is running . In that aspect you will have the value of only the last iteration.Please initialise locations outside and push the values inside the javascript array.Also you should consider json_encode way .It is much cleaner.
if you new at google maps you can use gmaps.js it allows you to use the potential of Google Maps in a simple way.
https://hpneo.github.io/gmaps/
and its marker example:
https://hpneo.github.io/gmaps/examples/markers.html
I think you need to use objects:
var locations = {
{
title: '<?= $row['name'] ?>',
lat: '<?= $row['lat'] ?>',
lng: '<?= $row['lng'] ?>'
}
}
And you can use json_encode instead
In your code you already have following locations available globally:
var locations = [
['Bondi Beach', -33.890542, 151.274856],
['Coogee Beach', -33.923036, 151.259052],
['Cronulla Beach', -34.028249, 151.157507],
['Manly Beach', -33.80010128657071, 151.28747820854187],
['Maroubra Beach', -33.950198, 151.259302]
];
Now add the following HTML and Javascript in your file and refresh the page. This will show you the Google map.
HTML:
<div id="map_canvas" style="width:700px;height:500px;"></div>;
Javascript
function loadMap()
{
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for( i = 0; i < locations.length; i++ ) {
var loc = locations[i];
var position = new google.maps.LatLng(loc[1], loc[2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: loc[0]
});
map.fitBounds(bounds);
}
}
google.maps.event.addDomListener(window, 'load', loadMap);
If you want to dynamically use your database please check this example.
Create the file map3.php. File same as here
$conn = mysql_connect("localhost","root","");
mysql_select_db('yourdatabase');
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
$query = mysql_query("select * from yourtable");
//header("Content-type: text/html");
/* Get lat and Lan using table query */
$i=0;
while($row = mysql_fetch_assoc($query)){
$reposnse['markers'][$i]['lat']= $row['lat'];
$reposnse['markers'][$i]['lag']= $row['lag'];
$i++;
}
echo json_encode($reposnse);
?>
After create map2.php same as here
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="application/javascript">
$(document).ready(function(e) {
$.ajax({
url:"map3.php",
dataType: 'json',
success: function(result){
var html = '<markers>';
for (var prop in result['markers']) {
var value = result['markers'][prop];
//alert(value.lat);
html += '<marker ';
html += 'lat="';
html += value.lat+'"';
html += 'lng="';
html += value.lag+'"';
html += '/>';
}
html += '</markers>';
$('#test').html(html);
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(15.317277,75.71389),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker;
var location = {};
var markers = document.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
//alert(markers[i].getAttribute("lat"));
location = {
name : 'test'+i,
address : 'baglore',
city : 'bangalore',
state : 'Karnataka',
zip : '560017',
pointlat : parseFloat(markers[i].getAttribute("lat")),
pointlng : parseFloat(markers[i].getAttribute("lng"))
};
console.log(location);
marker = new google.maps.Marker({
position: new google.maps.LatLng(location.pointlat, location.pointlng),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker,location) {
return function() {
infowindow.setContent(location.name);
infowindow.open(map, marker);
};
})(marker, location));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
},
});
});
</script>
</head>
<body>
<div id="test">
</div>
<div id="map" style="width: 500px; height: 400px;"></div>
</body>
</html>
Please check the link below Adding multiple markers to google maps using javascript and php
I am working in joomla 2.5 and I have to create a module for Google map and using Google map api v2.
and I am using geocoder = new GClientGeocoder(); but it is now working
output image:-
My html <div> tag
<div id="map_canvas" style="width: 800px; height:800px;"></div>
My script
<script>
//<![CDATA[
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
//calls map to appear inside <div> with id, "map_canvas"
map = new GMap2(document.getElementById("map_canvas"));
//adds zoom and arrow controls to map
geocoder = new GClientGeocoder();
map.setMapType(G_SATELLITE_MAP);
var allAddress = "Dubai~Abu Dhabi";
var addresses = new Array();
addresses = allAddress.split("~");
var curIndex = 0;
function showAddress() {
var _cur = addresses[curIndex];
geocoder.getLatLng(
_cur,
function(point) {
alert(_cur);
if (!point) {
alert(_cur + " not found");
} else {
alert(_cur+":"+point);
}
//do next after done
curIndex++;
if(curIndex<addresses.length)
showAddress();
}
);
}
showAddress();
}
}
//]]>
</script>
See below code and try it.
I am using php static array you can connect your database and create array according your requirement. see the array below.
<?php $item = array('jaipur, rajasthan,india', 'udaipur, rajasthan,india'); ?>
Below My Code Take a look.
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyDwFjOazEAe1MI7nHV6vUwkWytOp8LH2Zk" type="text/javascript"></script>
</head>
<body onload="initialize();">
<?php $item = array('jaipur, rajasthan,india', 'udaipur, rajasthan,india'); ?>
<script>
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
var addresses = ["<?php echo implode ('","', $item); ?>"]
var geocoder = new GClientGeocoder();
//var addresses = ["A II Z, Ibn Battuta Mall, Sheikh Zayed Road, 5th Interchange, Jebel Ali Village, Dubai","A. Testoni,Dubai Festival City Mall, Ground Floor, Dubai", "Abdulla Hussain Khunji, The Dubai Mall,Downtown, Abu Dhabi"];
var curIndex = 0;
function showAddress() {
var _cur = addresses[curIndex];
geocoder.getLatLng(
_cur,
function(point) {
if (!point) {
//alert(_cur + " not found");
//map.setCenter(new GLatLng(0, 0), 6);
//map.setUIToDefault();
} else {
//console.log(_cur+":"+point);
//alert(_cur);
var cafeIcon = new GIcon(G_DEFAULT_ICON);
// Set up our GMarkerOptions object
markerOptions = { icon:cafeIcon };
map.setCenter(point, 6);
var marker = new GMarker(point, markerOptions);
map.addOverlay(marker);
var sales = new Array();
sales = _cur.split("|");
//Add click event on push pin to open info window on click of the icon
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<p class='para1bold' style=\"font-weight: bold;\">Address <br /><span class='para1' style='font-weight:normal;'>" + sales[1] + "</span></p>");
});
//Provides map,satellite,hybrid and terrain views in the map along with zoom control
map.setUIToDefault();
}
//do next after done
curIndex++;
if(curIndex<addresses.length)
showAddress();
}
);
}
showAddress();
}
}
</script>
<div id="map_canvas" style="width:100%; height:750px;"></div>
</body>
</html>
I want to render route on google map by lat long from previous page(send by html form)
and put the recieve value on php hidden type then pull value by jquery and define a start,end point
from value in hidden type finally call routefunction but it's not show the way route
I try to put alert in render section it's work fine but not show way route.I don't know why
This is my code
<?php
//get lat long from previous page html form
$press = $_POST["send"];
$lat1 = $_POST["lat1"];
$long1 = $_POST["long1"];
$lat2 = $_POST["lat2"];
$long2 = $_POST["long2"];
?>
<!DOCTYPE html>
<head>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=my_key&sensor=false"></script>
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var rendererOptions = {draggable: true}; //define dragble direction
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var center = new google.maps.LatLng(13.76493,100.5383);
var mapOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: center
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); //render map
calcRoute(); //call route function
}
function calcRoute()
{//get lat long from hidden type
$(document).ready(function(){
var lat1 = $("#lat1").val();
var long1 = $("#long1").val();
var lat2 = $("#lat2").val();
var long2 = $("#long2").val();
var start = new google.maps.LatLng(lat1,long1);//define start point
var end = new google.maps.LatLng(lat2,long2);//define end point
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
alert("DO"); //it's show alert when redirect from previous page
}
});
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:400px"></div>
<?php
//put value from previous page on hidden type
echo "<input type='hidden' id='lat1' value='$lat1'>";
echo "<input type='hidden' id='long1' value='$long1'>";
echo "<input type='hidden' id='lat2' value='$lat2'>";
echo "<input type='hidden' id='long2' value='$long2'>";
?>
what i am trying to achieve is basically mark the location of all the users logged into my chat which is another thing. so i though i'd use geolocation api (http://code.google.com/apis/gears/api_geolocation.html) and store the generated location in a session variable. but its not working. here is the code-`
<?php
$my_lat= $_GET['test']; // get data
$my_long= $_GET['fname'];
$my_name = "vivek";
$lat1=28.635308;
$long1=77.22496;
//$latitude = $_GET['latitude'];
//$longitude = $_GET['longitude'];// get data
echo $my_lat.''.$my_long;
?>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=''
&sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var longi= position.coords.longitude;
var url = 'bam.php';
//post to the server!
$.get(url, { test: lat,fname: longi },function(data){
alert('data was passed!');
});
}, function() {
//now is when the marking should be done.
handleNoGeolocation(true);
});
}
});
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(28.635308,77.22496);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var thelat = '<?php echo $my_lat;?>';
var thelong = '<?php echo $my_long;?>';
var seslatlng = new google.maps.LatLng(thelat,thelong);
alert(seslatlng);
var marker = new google.maps.Marker({
position: seslatlng,
map: map,
animation: google.maps.Animation.DROP,
title:"Hello world!",
});
}
</script>`
and the problem is. that the variable seslatlng is set to (0,0) always which is not what i want. i am new to PHP and i only have rough idea how server side scripting works. can somebody please fix this?
Instead of using and for assigning values to javascript variables, use:
var thelat = '<?=$my_lat?>';
var thelong = '<?=$my_long?>';
and it will work for you. I have also tried it to assign php variables value to javascript variables.
I don't see anywhere that you are setting seslatlng. If you're wanting this to be a JS variable, add:
var seslatlng = "(<?php echo $my_lat . ',' . $my_lng; ?>)"; // (30.230, 8.030)
when you are using jquery's ajax get function, what you wanna do is call a php function that only returns the locations. this is how is should look:
<?php
if ( $_GET['test'] ) {
$my_lat= $_GET['test']; // get data
$my_long= $_GET['fname'];
$my_name = "vivek";
$lat1=28.635308;
$long1=77.22496;
//$latitude = $_GET['latitude'];
//$longitude = $_GET['longitude'];// get data
echo $my_lat.''.$my_long;
} else {
?>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=''
&sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var longi= position.coords.longitude;
var url = 'bam.php';
//post to the server!
$.get(url, { test: lat,fname: longi },function(data){
alert('My location is: ' + data);
});
}, function() {
//now is when the marking should be done.
handleNoGeolocation(true);
});
}
});
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(28.635308,77.22496);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var thelat = '<?php echo $my_lat;?>';
var thelong = '<?php echo $my_long;?>';
var seslatlng = new google.maps.LatLng(thelat,thelong);
alert(seslatlng);
var marker = new google.maps.Marker({
position: seslatlng,
map: map,
animation: google.maps.Animation.DROP,
title:"Hello world!"
});
}
</script>
<?php } ?>
The Best way is :
<script type="text/javascript">
var something=<?php echo json_encode($a); ?>;
</script>
Purpose of json_encode is to escpe the quotes and other entities <?php echo $a; ?> can break your code.