I'm a complete amateur at writing code. I would like to make an application for storing LNG, lat, and other data, as well as images in mysql. I've set up, I made a separate application for storing images and data storage via WebGIS applications. Now I do not know how to integrate the two applications.

If someone could help me, to be shown how to integrate this code:

<form enctype="multipart/form-data" action="add.php" method="POST"> 
Photo: <input type="file" name="photo"><br> 
<input type="submit" value="Add"> 


<!DOCTYPE html >
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="/ol/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="/ol/theme/default/google.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="/ol/OpenLayers.js"></script>

<script type="text/javascript">

var marker;
var infowindow;

var customIcons = {
  restaurant: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  bar: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'

function initialize() {

  var latlng = new google.maps.LatLng(45.0000, 17.5000);
  var options = {
   zoom: 10,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.SATELLITE
  var map = new google.maps.Map(document.getElementById("map-canvas"), options);
  var html = "<table>" +
             "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
             "<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
             "<tr><td>Type:</td> <td><select id='type'>" +
             "<option value='bar' SELECTED>bar</option>" +
             "<option value='restaurant'>restaurant</option>" +
             "</select> </td></tr>" +
             "<tr><td></td><td><input type='button' value='Save & Close onclick='saveData()'/></td></tr>";
infowindow = new google.maps.InfoWindow({
 content: html

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);


function saveData() {
  var name = escape(document.getElementById("name").value);
  var address = escape(document.getElementById("address").value);
  var type = document.getElementById("type").value;
  var latlng = marker.getPosition();

  var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
            "&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
  downloadUrl(url, function(data, responseCode) {
    if (responseCode == 200 && data.length <= 1) {
      document.getElementById("message").innerHTML = "Location added.";


function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request.responseText, request.status);

  request.open('GET', url, true);

function doNothing() {}


<body style="margin:10px; padding:10px;" onload="initialize()">
<div id="map-canvas" style="width: 100%; height: 800px"></div>
<div id="message"></div>



  • java tag or javascript tag? first you need a separate php code to connect to your mysql database - see stackoverflow.com/questions/15805887/… – Mapperz Oct 25 '13 at 13:50
  • I have created php, works correctly. All data is stored in MySQL, except for pictures. I think the problem in this html code, because I do not know how to integrate the two presented code. – Davorin Oct 25 '13 at 14:12

You have to use a blob type column in MySQL to store the image. Your php script then needs to present that blob as read from the MySQL table to the JS Script with the correct Mime Type.

I cannot give you any example code as I work in ASP, but the concept is the same. This might help you along.

Read from the Blob, write using a streamwriter with the correct Mime Type.

The JS Script will not care, it just has to look like an image when it arrives at the browser, so all the work needs to be done on your server to make this happen


Mark C explained you how to store image in DB but actually, most of the time, there is absolutely no need to store image content (as blob) in a database.

I would give you the advice of storing it as just a file and store the path into the database. You, then, just have to create a new varchar field containing a filepath like /images/user/my_image.png

This will speed up the script execution and prevent DB overload .... It seems, that's what you are actually trying to do.

Regarding your last attempt, you are passing the photo as pic parameters into the URL but in the PHP part, you treat it as $_FILES['photo']. It can't work ...

Change it to :

  var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address + "&photo=" + photos +

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.