Questions:
Hi,
I want to embed a dynamic google map in my website by IP address. I got the lat/long data using IPlocation tools. I could not yet connect the lat/log data from IPlocation to google map java codes. I m not sure how to format/define/put latitude and longitude in load map function. here are things I tried and did not work yet:
I tried , into javascript code,
I also tried manually putting values for $latitude and $longitude.
I tried directly putting 'ip2location_latitude()' and 'ip2location_longitude()' in java codes.
eventually I need to get a location history based on IP and record the location data to a database.
Thanks in advance
here is the summary of my code:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <!-- Google map API v3 -->
<?php
$latitude = 'ip2location_latitude()'; //------------ IP latitude
$longitude = 'ip2location_longitude()'; //------------ IP latitude ip2location_longitude()
?>
<!-- Start loading canvas google map -->
<script type="text/javascript">
function loadmap () {
var latlng = new google.maps.LatLng($latitude,$longitude);
var option = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), option);
createMarker(latitude,logitude, 'lol');
downloadUrl("airport.xml", function(data) {
var xml = xmlParse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
document.getElementById("test").innerHTML = markers.length;
for (var i = 0; i < markers.length; i++) {
var info = markers[i].getAttribute("info");
var lat = parseFloat(markers[i].getAttribute("lat"));
var lon = parseFloat(markers[i].getAttribute("lng"));
createMarker(lat, lon, info);
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function createMarker(lat, lon, info){
var myLatlng = new google.maps.LatLng($latitude,$longitude);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"My location",
icon: "http://google-maps-icons.googlecode.com/files/airport.png"
});
}
</script>
<!-- End Geting map via latitude and longitude-->
<!-- Start calling load map function to load the map -->
<body onload="loadmap ()">
<div id="map_canvas" style="width:400px; height:300px"></div>
<div id="test" style="width:50%; height:50%"></div>
<!-- End calling load map function to load the map -->
You forgot to use echo/print to print the values of the PHP-variables.
Inside createMarker you should refer to the provided arguments(lat,lon) instead of $latitude/$longitude
Fixed version:
<body onload="loadmap ()">
<script src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script src="http://www.iplocationtools.com/iplocationtools.js?key=YOURKEY">
</script>
<?php
$latitude = 'ip2location_latitude()'; //------------ IP latitude
$longitude = 'ip2location_longitude()'; //------------ IP latitude ip2location_longitude()
?>
<script type="text/javascript">
function loadmap () {
var latlng = new google.maps.LatLng(<?php echo $latitude;?>,<?php echo $longitude;?>);
var option = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), option);
createMarker(<?php echo $latitude;?>,<?php echo $longitude;?>, 'lol');
}
function createMarker(lat, lon, info){
var myLatlng = new google.maps.LatLng(lat,lon);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"My location",
icon: "http://google-maps-icons.googlecode.com/files/airport.png"
});
}
</script>
<div id="map_canvas" style="width:400px; height:300px"></div>
<div id="test" style="width:50%; height:50%"></div>
</body>
But however, this service isn't very accurate, for me it shows a location 400km away from my current place. I would suggest to use browser-implemented geolocation.
Related
I'm making an app with GoogleMap inside DJ Native webBrowser component. I load page as a string using webBrowser.setHTMLContent(String). HTML file contains JavaScript which add markers to map.
I made simple html file with google-maps-api functions.
It works perfect on Chrome as well as Firefox. But not in webBrowser (djnative).
I discovered that script without new marker statement(google.maps.Marker) works OK.
Have anyone got any idea what's wrong?
Is there any way to show console log from webBrowser (like ctrl+shift+J in Chrome)
This is script code:
<script type="text/javascript" src=https://maps.googleapis.com/maps/api/js?key=[MY_KEY]&sensor=false">
</script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.236302, 21.007636),
zoom: 10
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var t = [];
var x = [];
var y = [];
var h = [];
t.push('Location Name 1');
x.push(52.232097);
y.push(20.927985);
h.push('<p><strong>Location Name 1</strong><br/>Address 1</p>');
t.push('Location Name 2');
x.push(52.245097);
y.push(20.945985);
h.push('<p><strong>Location Name 2</strong><br/>Address 2</p>');
/*this is error making code*/
var i = 0;
for ( item in t ) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(x[i], y[i]),
map: map,
title: t[i],
});
i++;
} /*this is end of error making code*/
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
1.Dj is using ie as default. did you try opening the html with ie?
2.In dj, you can not always setting the content and expect it run. for example, the tinymce editor, does not run if you set the editor.html (html containint tinymce) directly. That is why the author of dj made internal webserver for editors. You have to call it through an address (for editor ck and tinymce, dj calls localhost, http://127.0.0.1/tinymce/.. but the structure is too complex to be detailed here. you may try for testing purpose, putting your html to a simple web page (tomcat) and call it through loadURL (instead of setContent)
I have installed the tracking code to the site but I need some assistance with adding the nesseasry code for getting the details of the proccessed order the provided documentation is as follows
Where Order-Specific Information is Generated
Order-specific information can be generated by JavaScript on the OrderFinished.asp page within Volusion. Two JavaScript arrays will be initialized that you may need to be aware of:
Order Array Contents
Order[0] = Order ID
Order[1] = Unused
Order[2] = Payment Amount
Order[3] = Affiliate Commissionable Value
Order[4] = Sales Tax
Order[5] = Total Shipping Cost
Order[6] = Billing City
Order[7] = Billing State
Order[8] = Billing Country
Order[9] = Email Address
OrderDetails Array Contents
OrderDetails[X][0] = Order ID
OrderDetails[X][1] = Order Detail ID
OrderDetails[X][2] = Product Code
OrderDetails[X][3] = Product Name
OrderDetails[X][5] = Product Price
OrderDetails[X][6] = Quantity
Note that in the above example, [X] refers to an OrderDetail line item number (beginning from zero). There may be multiple OrderDetails arrays - one for each unique item contained within an order.
** My goal is to get all the details of the order and be tracked with google analytics *
my current applied code is
<!-- Google Code for Adwords Refferal Purchase Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 1036766578;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "yqleCOCs4gYQ8pqv7gM";
var google_conversion_value = 0;
var google_remarketing_only = false;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/1036766578/? value=0&label=yqleCOCs4gYQ8pqv7gM&guid=ON&script=0"/>
</div>
</noscript>
<script type="text/javascript">
var fb_param = {};
fb_param.pixel_id = '6009634664184';
fb_param.value = '0.00';
fb_param.currency = 'USD';
(function(){
var fpw = document.createElement('script');
fpw.async = true;
fpw.src = '//connect.facebook.net/en_US/fp.js';
var ref = document.getElementsByTagName('script')[0];
ref.parentNode.insertBefore(fpw, ref);
})();
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/offsite_event.php?id=6009634664184&value=0¤cy=USD" /></noscript>
<!-- Facebook Conversion Code for GI Purchase Conversion -->
<script>(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
})();
window._fbq = window._fbq || [];
window._fbq.push(['track', '6014711922784', {'value':'0.01','currency':'USD'}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr? ev=6014711922784&cd[value]=0.01&cd[currency]=USD&noscript=1" /></noscript>`
What you are showing from the documentation is how the order variables are output on the order finished page. What you need is to add javascript to that page to push the details into Google Analytics.
Here is the code for Universal Analytics:
<script type="text/javascript"> // Summary ga('require', 'ecommerce', 'ecommerce.js'); ga('ecommerce:addTransaction', { id: Order[0], // Order ID affiliation: 'Convergent7', // Store name - Add yours revenue: Order[2], // Grand Total shipping: Order[5] , // Shipping Cost tax: Order[4] // Sales Tax }); // Details for(var i=0;i<OrderDetails.length;i++) { ga('ecommerce:addItem', { id: OrderDetails[i][0], // Order Detail ID sku: OrderDetails[i][2], // Product Code name: OrderDetails[i][3], // Product Name category: OrderDetails[i][4], // Category ID price: OrderDetails[i][5], // Product Price quantity: OrderDetails[i][6] // Quantity }); } // Send ga('ecommerce:send'); </script>
See the following article (Step 3) for details. http://www.convergent7.com/volusion/universal-analytics-upgrade/
Your conversion code isn't for Google Analytics... it's for Google AdWords.
I am trying to load a table with data by initializing a Javascript variable with a string in JSON format. If I declare:
<script type="text/javascript">
var data = new String("{totalCount: '1', identifier: 'EntityID', items: [{'EntityID':'1','Country':'United States','Region':'','State':'California','County':'Santa Clara','City':'San Jose','ZipCode':'95134'}]}");
var d3 = eval('(' + data + ')');
<span dojoType="dojo.data.ItemFileWriteStore" jsId="dataStore" data=d3></span>
</script>
then my table will correctly load the row.
I have tried initializing a Java string before my script and then passing that object into a Javascript variable like so:
<%
String d = "{totalCount: '1', identifier: 'EntityID', items: [{'EntityID':'1','Country':'United States','Region':'','State':'California','County':'Santa Clara','City':'San Jose','ZipCode':'95134'}]}";
%>
<script type="text/javascript">
var data = new String(<%=d%>);
// var data = new String(d) // tried this as well
var d3 = eval('(' + data + ')');
<span dojoType="dojo.data.ItemFileWriteStore" jsId="dataStore" data=d3></span>
</script>
My table does not recognize this and is unable to load the row when I attempt to pass it this way. How can I properly pass a Java string to Javascript so that my table will be able to load the data?
Try with quotes around.
var data = new String("<%= d %>");
I am new to Java Script. I am using it, in combination with Java Server Faces 2.0.
I want to add some points to define a Polilyne using GoogleMaps Apiv3. My problem is that I can't add a FOR statement to the javascript, because it dumps. If I comment this FOR loop, it also dumps. The dump I am getting is: "javax.servlet.ServletException: null source".
Has anyone any suggestion to solve this? Thanks in advance, Emanuel
<script type="text/javascript">
function initialize()
{
var longit = "${dateRange.longitude}" ;
var lat = "${dateRange.latitude}" ;
var latlng = new google.maps.LatLng(lat, longit);
var myOptions =
{
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var points = [];
var cadena1 = "${dateRange.latArray}" ;
var cadena2 = "${dateRange.longArray}" ;
var latArray = cadena1.split('?');
var longArray = cadena2.split('?');
/* The code Below is the one that fails */
for (var i=0; i < latArray.length; i++)
{
points.push(new google.maps.LatLng(latArray[i], longArray[i]));
}
/* Finish of the error code */
// The Polilyne is created
var mapPath = new google.maps.Polyline
({
path: points,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 4
});
mapPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<h:graphicImage url="http://localhost:8080/gps_tracking/faces/resources/images/logo.jpg">
</h:graphicImage>
<h1 align="center">Sol-Tech</h1><br />
<hr></hr>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
I have the following code in javascript:
<script type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/js/sample-points.js"></script>
<script type="text/javascript">//<![CDATA[
var cloudmade = new CM.Tiles.CloudMade.Web({key: 'bbb'});
var map = new CM.Map('cm-example', cloudmade);
map.setCenter(new CM.LatLng(51.50874, 22.76367), 4);
var markers = [];
for (var i = 0; i < samplePoints.length; i++) {
markers.push(new CM.Marker(new CM.LatLng(samplePoints[i][0], samplePoints[i][1])));
}
var clusterer = new CM.MarkerClusterer(map, {clusterRadius: 70});
clusterer.addMarkers(markers);
//]]></script>
"samplePoints" is an array of coordinates which I can use to show markers on the map.
Map is showing here:
<div id="cm-example" style="width: 99.5%; height: 600px"></div>
How can I provide this array from jsf/richfaces without using file (e.g. I want to fetch those data from db, create array and send to this script)?
Thanks
Just let JSF print it as if it is JavaScript code.
Replace
var markers = [];
for (var i = 0; i < samplePoints.length; i++) {
markers.push(new CM.Marker(new CM.LatLng(samplePoints[i][0], samplePoints[i][1])));
}
by (assuming Facelets)
var markers = [];
<ui:repeat value="#{bean.samplePoints}" var="samplePoint">
markers.push(new CM.Marker(new CM.LatLng(#{samplePoint[0]}, #{samplePoint[1]})));
</ui:repeat>
where #{bean.samplePoints} returns a List<BigDecimal[]> or something.
See this Link
using jsFunction you can load any data structure (e.g. Points), and on your clients side you get a javaScript data structure that you can easily access it (point.x).