Insert markers from frontend

vinset · Post by **vinset** » 27 Feb 2011, 04:10

Can users insert markers from frontend?

muhad · Post by **muhad** » 24 Mar 2011, 10:54

Hi

You can start from this:

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl-pl" lang="pl-pl" dir="ltr" >
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<form action="index2.php" method="post" name="adminForm" id="adminForm">
<label for="longitude">Long:</label>
<input class="text_area" name="longitude" id="longitude" value="" size="32" maxlength="250" type="text">
<label for="latitude">Lat:</label>
<input class="text_area" name="latitude" id="latitude" value="" size="32" maxlength="250" type="text">
<label for="zoom">Zoom:</label>
<input class="text_area" name="zoom" id="zoom" value="15" size="32" maxlength="250" type="text">
<label for="geotitle">Title:</label>
<input class="text_area" name="geotitle" id="geotitle" value="" size="32" maxlength="250" type="text">
</form>
<div>
	<script src="http://www.google.com/jsapi" type="text/javascript"></script><noscript>JavaScript musi być włączony, aby można było korzystać z Map Google. Jednakże wydaje się, JavaScript jest wyłączony lub nie jest obsługiwany przez przeglądarkę. Aby wyświetlić Mapy Google, włącz JavaScript w opcjach przeglądarki, a następnie spróbuj ponownie.</noscript><div align="center" style="margin:0;padding:0"><div id="xxxMap" style="margin:0;padding:0;width:620px;height:540px"></div></div><script type='text/javascript'>//<![CDATA[
google.load("maps", "3.x", {"other_params":"sensor=false"});
var tstxxxMap = document.getElementById('xxxMap');
var tstIntxxxMap;
var mapxxxMap;
function CancelEventxxxMap(event) {
   var e = event;
   if (typeof e.preventDefault == 'function') e.preventDefault();
   if (typeof e.stopPropagation == 'function') e.stopPropagation();
   if (window.event) {
       window.event.cancelBubble = true; /* for IE */
	     window.event.returnValue = false; /* for IE */
   }
}
function CheckxxxMap() {
   if (tstxxxMap) {
      if (tstxxxMap.offsetWidth != tstxxxMap.getAttribute("oldValue")) {
         tstxxxMap.setAttribute("oldValue",tstxxxMap.offsetWidth);
		   if (tstxxxMap.getAttribute("refreshMap")==0) {
		      if (tstxxxMap.offsetWidth > 0) {
			     clearInterval(tstIntxxxMap);
				 getxxxMap();
				 tstxxxMap.setAttribute("refreshMap", 1);
			  }
		   }
		}
   }
}
function getxxxMap(){
   if (tstxxxMap.offsetWidth > 0) {
var xxxLatLng = new google.maps.LatLng(49.53485285129365, 20.653202533721924);
var xxxOptions = {
zoom: 15,
center: xxxLatLng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DEFAULT},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.DEFAULT},
scaleControl: true,
scrollwheel: true,
disableDoubleClickZoom: true,
//bylo ROADMAP
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var mapxxxMap = new google.maps.Map(document.getElementById('xxxMap'), xxxOptions);
var xxxStartZoom 	= 2;
var xxxZoom 		= null;
google.maps.event.addListener(mapxxxMap, "zoom_changed", function(xxxStartZoom, xxxZoom) {
xxxZoom = mapxxxMap.getZoom();
   window.top.document.forms.adminForm.elements.zoom.value = xxxZoom;
});
var xxxPoint1 = new google.maps.LatLng(49.53485285129365, 20.653202533721924);
var markerxxxMarker1 = new google.maps.Marker({
   position: xxxPoint1,
   map: mapxxxMap,
   draggable: true
});
var infoxxxWindow1 = new google.maps.InfoWindow({
	content: markerxxxMarker1.getPosition().toUrlValue(6)
});
google.maps.event.addListener(markerxxxMarker1, 'dragend', function() {
var xxxPointTmp = markerxxxMarker1.getPosition();
markerxxxMarker1.setPosition(xxxPointTmp);
closeMarkerInfo1();
exportPoint1(xxxPointTmp);
});
google.maps.event.addListener(mapxxxMap, 'click', function(event) {
var xxxPointTmp2 = event.latLng;
markerxxxMarker1.setPosition(xxxPointTmp2);
closeMarkerInfo1();
exportPoint1(xxxPointTmp2);
});
google.maps.event.addListener(markerxxxMarker1, 'click', function(event) {
openMarkerInfo1();
});
function openMarkerInfo1() {
infoxxxWindow1.content = markerxxxMarker1.getPosition().toUrlValue(6);
infoxxxWindow1.open(mapxxxMap, markerxxxMarker1 );
}
function closeMarkerInfo1() {
infoxxxWindow1.close(mapxxxMap, markerxxxMarker1 );
}
function exportPoint1(xxxPointTmp3) {
   window.top.document.forms.adminForm.elements.latitude.value = xxxPointTmp3.lat();
   window.top.document.forms.adminForm.elements.longitude.value = xxxPointTmp3.lng();
}
google.maps.event.addDomListener(tstxxxMap, 'DOMMouseScroll', CancelEventxxxMap);
google.maps.event.addDomListener(tstxxxMap, 'mousewheel', CancelEventxxxMap);   }
}
function initialize() {
   tstxxxMap.setAttribute("oldValue",0);
   tstxxxMap.setAttribute("refreshMap",0);
   tstIntxxxMap = setInterval("CheckxxxMap()",500);
}
google.setOnLoadCallback(initialize);
//]]></script>
</div>
</body>
</html>

It's not too clean (some code from oryginal phocaMap files), but...
You have add small function to add Marker to markers file.

Post by **Jan** » 26 Jul 2011, 22:08

Hi, try to see:
viewtopic.php?f=38&t=7223&p=60177#p60177

Phoca Forum

Insert markers from frontend

Insert markers from frontend

Re: Insert markers from frontend

Re: Insert markers from frontend