Insert google map with latitude and longitude in a form of a table

xaviss2k · November 2012

Hi I would like to insert a Google map (I have the php code) in a form of a table that now I have latitude and longitude in text, I want it display inside on form... That steps would have to do and I have to modify code? Thank´s

allan · November 2012

Sounds like a perfect use case for a field type plug-in for Editor. There is a tutorial on how to built field type plug-ins here: http://editor.datatables.net/tutorials/field_types . Using this method your map is basically treated as an input (although it can return an empty value if you don't want to actually read data from it) and displayed inline with the from.

Regards,
Allan

soportebcntekart · November 2012

sorry but I'm starting with this and I have little idea of how to use yet, if I could give more information about how I can do what I ask I would appreciate, thank´s

soportebcntekart · November 2012

I'm xaviss2k but from another account...

allan · November 2012

Perhaps you could post what you've got thus far based on the tutorial? Most of the work involved will probably be in the Google Maps API, so if you've got a map being correctly shown on the screen (regardless of Editor), that's probably 70% of the work needed.

Allan

xaviss2k · November 2012

I want to put this map, I have this code but not where I have to put...

<?php
$latMapa = "42.545998";
$lngMapa = "1.601257";
?>

<!DOCTYPE html>

Google Maps JavaScript API v3 Example: Places Autocomplete

body {
font-family: sans-serif;
font-size: 14px;
}
#map_canvas {
height: 400px;
width: 600px;
margin-top: 0.6em;
}

function initialize() {
var mapOptions = {
center: new google.maps.LatLng(<?=$latMapa?>, <?=$lngMapa?>),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);

var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);

autocomplete.bindTo('bounds', map);

var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
draggable: true

});

google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}

var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(35, 35));
marker.setIcon(image);
marker.setPosition(place.geometry.location);

var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}

infowindow.setContent('' + place.name + '
' + address);
infowindow.open(map, marker);

});

// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
google.maps.event.addDomListener(radioButton, 'click', function() {
autocomplete.setTypes(types);
});
}

setupClickListener('changetype-all', []);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);

// Mostrat lat i long en txtbox
google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("latbox").value = this.getPosition().lat();
document.getElementById("lngbox").value = this.getPosition().lng();
});

google.maps.event.addListener(marker, 'click', function (event) {
document.getElementById("latbox").value = event.latLng.lat();
document.getElementById("lngbox").value = event.latLng.lng();
});

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

All

Establishments

Geocodes

Latitude:
Longitude:

allan · November 2012

Okay - so do you only want the display part of that your Editor input, or you do want the lat / long inputs as well? Basically you need to wrap that code up into the `create` method for your Editor plug-in.

Allan

xaviss2k · November 2012

I want to show it and registered and the latitude and longitude in the database

Thanks

xaviss2k · November 2012

Hi I still do not know what steps would have to give and which files I have to modify or add code, please need help

Thanks

allan · November 2012

Well - I'd start by taking the above code that you pasted and remove the inputs from it, so it is just using had coded latitude and longitude (that would be replaced by the values from your database), but that's where I would start to make sure you have a good grip on that code.

The following step would be to follow the field type plug-in tutorial for Editor to create the plug-in described there and ensure that you understand all of the steps required for that.

Following that, you'd need to wrap you map plotting code into a new field type plug-in - primarily in the `create` method.

Allan

xaviss2k · November 2012

I really do not know where to start or how I can do this, I'm a little lost on this, do not know how you can help me do this I ask.

Also do not know English and I have to be translated much and translations are not good... :(

allan · November 2012

I can't suggest much more that what I have above. Those are the three basic steps that I would take myself to try and get it working. Start simple and work up :-)

Allan

xaviss2k · November 2012

This code would be?

<!DOCTYPE html>

Google Maps JavaScript API v3 Example: Places Autocomplete

body {
font-family: sans-serif;
font-size: 14px;
}
#map_canvas {
height: 400px;
width: 600px;
margin-top: 0.6em;
}

function initialize() {
var mapOptions = {
center: new google.maps.LatLng(<?=$latMapa?>, <?=$lngMapa?>),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);

var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);

autocomplete.bindTo('bounds', map);

var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
draggable: true

});

google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}

var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(35, 35));
marker.setIcon(image);
marker.setPosition(place.geometry.location);

var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}

infowindow.setContent('' + place.name + '
' + address);
infowindow.open(map, marker);

});

// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
google.maps.event.addDomListener(radioButton, 'click', function() {
autocomplete.setTypes(types);
});
}

setupClickListener('changetype-all', []);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);

// Mostrat lat i long en txtbox
google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("latbox").value = this.getPosition().lat();
document.getElementById("lngbox").value = this.getPosition().lng();
});

google.maps.event.addListener(marker, 'click', function (event) {
document.getElementById("latbox").value = event.latLng.lat();
document.getElementById("lngbox").value = event.latLng.lng();
});

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

All

Establishments

Geocodes

Latitud:
Longitud:

allan · November 2012

Does it run as you would expect? If so, then yes.

xaviss2k · November 2012

The problem is that I do not know where I have to put that code, if I have to set up as a new file or paste it into a file that is already created ...

allan · November 2012

Given that it is a complete HTML page, I'd suggest putting it into its own file.

Insert google map with latitude and longitude in a form of a table

Insert google map with latitude and longitude in a form of a table

Replies

Howdy, Stranger!

Categories

DataTables

Insert google map with latitude and longitude in a form of a table

Insert google map with latitude and longitude in a form of a table

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables