This exact code has worked on previous projects, however it is not working now.
The map does not display, however I see the JS show in chrome inspect tools. The div element for the map is there etc, just no visible map. I am using AFC, and have triple checked spelling etc.
Code below:
<!--place google map here-->
<div id="view1">
<?php
$location = get_field('store_location');
if( ! empty($location) ):
?>
<div id="map" style="width: 100%; height: 350px;"></div>
<script src='http://maps.googleapis.com/maps/api/js?sensor=false' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
function load() {
var lat = <?php echo $location['lat']; ?>;
var lng = <?php echo $location['lng']; ?>;
// coordinates to latLng
var latlng = new google.maps.LatLng(lat, lng);
// map Options
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//draw a map
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
}
// call the function
load();
//]]>
</script>
<?php endif; ?>
</div>
See any problems?
Issue had to do with flexbox and bootstrap. Was using flexbox for equal column height throught site, but that seems to break this AFC google map. Placed the map outside the bootstrap column and issue was resolved.
Related
I am beginner to web and making a webpage with google map and a marker in it. Admin can moniter the position of mobile that sends its coordinates (longitude, latitude) to server after some time interval, these coordinates are stored in database with a particular id.
The position of marker should change when coodinates changes, I am unable to understand how it will be done.
I have made php file to fetch the coordinates but cant understand how to proceed further.
This is the webpage that i have made so far:
<!DOCTYPE html>
<html>
<head>
<style>
#map { width: 1000px;height: 500px;}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var latlng = {lat: 31.54972, lng: 74.34361};
function initialize()
{
var mapCanvas = document.getElementById('map');
var mapOptions =
{
center: latlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: latlng,
title: "Hello World!"
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
and here is the php file to fetch coordinates from database:
<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB','coordinates');
$con = mysqli_connect(HOST,USER,PASS,DB);
$id = $_GET['id'];
$query = "SELECT longitude,latitude FROM data";
$qry_result = mysqli_query($con,$query) or die(mysqli_error());
// Insert a new row in the table for each person returned
while($row = mysqli_fetch_array($qry_result)) {
$longitude = $row['longitude'];
$latitide = $row['latitude'];
}
?>
Okay, I'll first show you the result with test data, so you see how the map hehaves.
I add jQuery, to do the Ajax call. Ajax lets the webbrowser surf to any page on your site, without leaving the page. The user doesn't notice anything going on
10 points on a line through Lahore. Cookies store the index (0 to 9).
testdata.php
<?php
// this test loops a trajectory through Lahore, in 10 steps.
// every 10 steps it goes back to the start
// it's just test data, to show the map is working
// $start = 31.468885630398272,74.24052429199217
// $end = 31.572736162286912,74.43412613868712
$i = (isset($_COOKIE['i']) ? $_COOKIE['i'] + 1 : 0) % 10;
setcookie('i', $i);
echo json_encode(array(
'lat'=>31.468885630398272 + (31.572736162286912 - 31.468885630398272) * $i / 10,
'lng'=>74.24052429199217 + (74.43412613868712 - 74.24052429199217) * $i / 10
));
exit;
?>
index.php
<!DOCTYPE html>
<html>
<head>
<style>
#map { width: 1000px;height: 500px;}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
var latlng = {lat: 31.54972, lng: 74.34361};
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: latlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: latlng,
title: "Hello World!",
map: map // replaces marker.setMap(map);
});
// now let's set a time interval, let's say every 3 seconds we check the position
setInterval(
function() {
// we make an AJAX call
$.ajax({
dataType: 'JSON', // this means the result (the echo) of the server will be readable as a javascript object
url: 'testdata.php',
success: function(data) {
// this is the return of the AJAX call. We can use data as a javascript object
// now we change the position of the marker
marker.setPosition({lat: Number(data.lat), lng: Number(data.lng)});
}
})
}
, 3000 // 3 seconds
);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
So now your real php file.
call it (for example) ajax.php. Change 'testdata.php' to 'ajax.php' on line 31 of index.php
I think it should be this, though I didn't test it with a database. Check it yourself
I assume you have an AUTOINCREMENT id, but this could also be done with a timestamp, or so
ajax.php
<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB','coordinates');
$con = mysqli_connect(HOST,USER,PASS,DB);
$id = $_GET['id'];
$query = "SELECT id, longitude, latitude FROM data ORDER BY id DESC LIMIT 1";
$qry_result = mysqli_query($con,$query) or die(mysqli_error());
// Insert a new row in the table for each person returned
if($row = mysqli_fetch_array($qry_result)) { // whenever you only need 1 record, use "if" instead of "while"
$longitude = $row['longitude'];
$latitude = $row['latitude'];
// echo the object
echo json_encode(array(
'lat'=>$latitude,
'lng'=>$longitude
));
}
exit;
?>
I have a component called foo
I have foo.html in apps/foo/components/content/foo/foo.html
currently this file contains the following.
<div data-sly-use.ev="Foo"
class="${ev.cssClass || ''}"
title="${ev.title || ''}"
data-emptytext="Foo Asset">
${ev.html # context='unsafe'}</div>
I have Foo.java in apps/foo/components/content/foo/Foo.java
that has getCssClass(), getTitle(), getHtml() needed by foo.html.
The above works fine
Question
When the user adds this component to the page, I want it to include a google map in the page. The lat/long to the google map will be provided by Foo.java#getLat() and Foo.java#getLong()
How can I do this?
I have the google map working in an HTML outside of AEM and the code is pretty simple:
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
the lat/long values for myLatlng variable in the above javascript will need to come from Foo.java.
If you want to pass parameters to a script you can do as they generally do in Coral UI via data-xxx attributes in the Sightly script.
Set the property from your Foo into a data attribute in some DIV you will later fetch in JS.
Get the div in JS via its ID and obtain the data attributes you are interested in.
Example:
Sightly
<div id="map_canvas" data-lat="${ev.lat}" data-long="${ev.long}">
</div>
Javascript
this.mapCanvas = document.getElementsByClassName("map_canvas")[0];
var lat = $mapCanvas.data("lat");
var long = $mapCanvas.data("long");
var myLatlng = new google.maps.LatLng(lat,long);
I hope this helps! :)
I have been working with a wordpress theme that has the support to just add coordinates in a menu and directly display the map on the contact page. Now I have a new business address that needs to be added to the contact map but the theme doesn't support that.
Giving the fact that my experience in php and js is limited I couldn't find a solution for my problem.
My code for the contact page is bellow and all I need is to add a new map with different coords before the contact form.
<div id="content">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
$show_map = get_option('theme_gmap_show');
if($show_map == 'true')
{
$map_lati = get_option('theme_gmap_lati');
$map_longi = get_option('theme_gmap_longi');
$map_zoom = get_option('theme_gmap_zoom');
?>
<div class="map-container clearfix">
<div id="map_canvas"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize()
{
var geocoder = new google.maps.Geocoder();
var map;
var latlng = new google.maps.LatLng(<?php echo $map_lati; ?>, <?php echo $map_longi; ?>);
var infowindow = new google.maps.InfoWindow();
var myOptions = {
zoom: <?php echo $map_zoom; ?>,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder.geocode( { 'location': latlng },
function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
initialize();
</script>
</div>
<?php
}
the_content();
$postal_address = stripslashes(get_option('theme_postal_address'));
if(!empty($postal_address))
{
?>
<h3 class="smart-head">Adresa de contact</h3>
<p><address>
<?php echo $postal_address; ?>
</address></p>
<?php
}
?>
<div class="contact-orar">
<h3 class="smart-head">Program de Lucru</h3>
<p><strong>Luni - Vineri:</strong> 8:00 - 17:00<br />
<strong>Sambata:</strong> 8:00 - 14:00<br />
<strong>Duminica:</strong> inchis</p>
</div>
<div class="contact-form-container">
Thank in advance for any help!
You have to add a random key to the end of the call to your query. This is an example using KML layers, but it is the same concept.
$( function() {
$(".map_canvas").each( function() {
var theElement = $(this).attr('id');
var lat = $(this).attr('lat');
var lon = $(this).attr('lon');
var kml = $(this).attr('kml');
var mapCenter = new google.maps.LatLng(lat,lon);
var mapOptions = {
zoom: 14,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById(theElement), mapOptions);
var geopoints = new google.maps.KmlLayer('http://blah.com/temps/kmls/' + kml + '.kml?run=' + (new Date()).getTime() ); //?nocache=0
geopoints.setMap(map);
});
})
Even without any PHP knowledge you should be able to manage adding a map, the code uses the Google Maps API v3. You can easiliy add another map using JavaScript. First of all add another div with ID map_canvas_2 next you should use the following Javascript code:
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(/*latitude here*/,/*longitude here*/)
};
map = new google.maps.Map(document.getElementById('map_canvas_2'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
This will display a map centered on the coordinates you specify in the map_canvas_2 div. You can find more information here: https://google-developers.appspot.com/maps/documentation/javascript/reference
JsFiddle here: http://jsfiddle.net/Chycx/2/
So these Google Maps were working fine and then all of a sudden they weren't. The only change I made was uploading new images for the markers. Upon inspection I can see that the new markers are loading properly and the console produces no errors (Chrome and FF). I have tried flipping the sensor between true and false, also with no luck. When I removed the sensor attrib it kicked back the standard alert error of needing it.
Am I missing something simple?
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYAPIKEY&sensor=false">
</script>
<script type="text/javascript">
var wildbasin = new google.maps.LatLng(30.310716, -97.824238);
var seucampus = new google.maps.LatLng(30.229723, -97.755275);
var austin = new google.maps.LatLng(30.275079, -97.792053);
var basinm = 'http://www.test.stedwards.edu/sites/default/files/wildbasinmarker_1.png';
var campusm = 'http://www.test.stedwards.edu/sites/default/files/maincampusmarker_0.png';
var map;
function initialize() {
var myOptions = {
zoom: 12,
center: austin,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var campus = new google.maps.Marker({
position: seucampus,
map: map,
title:"St.Edward's University",
icon: campusm
});
var thebasin = new google.maps.Marker({
position: wildbasin,
map: map,
title:"Wild Basin",
icon:basinm
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>
While the map will default to 100% width, you need to set a height for the containing div. For example, this will solve your issue:
<div id="map_canvas" style="height:400px;"></div>
I am making a map where I have the KML load and the markers load on the same canvas in which I want the boundary to be however big the markers even though the kml is on the canvas. I'm using this in conjunction with php so there's a bit of php in the code but nothing to special besides entering information for variables.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
if ($('#map_canvas').length != 0) {
var myLatlng = new google.maps.LatLng(45.266438, -93.233225);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var bounds = new google.maps.LatLngBounds();
var kmlLayer = new google.maps.KmlLayer('<?php bloginfo('template_url'); ?>/includes/delivery-maps/mansettisdel.kml', { map: map });
var jsongeo = <?php echo(json_encode($geo_json)); ?>;
$.each(jsongeo, function(index, value) {
var latlng = new google.maps.LatLng(value.lat,value.lng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Hello World!"
});
bounds.extend(latlng);
map.fitBounds(bounds);
});
}
});
</script>
here is the var_dump of the json that I am looping through the lat and longitude.
string(617) "[{"type":"delivery","lat":"45.341969","lng":"-93.277657","date":"2011-07-11"},{"type":"delivery","lat":"45.005360","lng":"-93.323738","date":"2011-07-12"},{"type":"delivery","lat":"45.319408","lng":"-93.202446","date":"2011-07-12"},{"type":"delivery","lat":"45.131786","lng":"-93.216576","date":"2011-07-13"},{"type":"delivery","lat":"44.804131","lng":"-93.166885","date":"2011-07-13"},{"type":"delivery","lat":"45.119965","lng":"-93.287727","date":"2011-07-13"},{"type":"delivery","lat":"42.358433","lng":"-71.059776","date":"2011-07-13"},{"type":"delivery","lat":"34.195915","lng":"-84.507317","date":"2011-07-13"}]"
Now I'm not having issues with the markers going through but just the bounds. I don't know if there is something other I would have to do with the lat,long but I read up on this a ton and can't find a thing.
Here is what is showing up.
What shows up
Here is what I would like to show up.
What I want to show up
Even though the KML is on the map I would like the markers to be the bounds. Is there something that google maps does that sets it to the KML or do I have the bounds done incorrectly? I notice it goes to the bounds view and then RIGHT to the KML view.
Try adding the option preserveViewport: true to the KML options so it reads:
var kmlLayer = new google.maps.KmlLayer('<?php bloginfo('template_url'); ?>/includes/delivery-maps/mansettisdel.kml', {
map: map,
preserveViewport: true
});
That should stop it zooming it into the KML bounds.
http://code.google.com/apis/maps/documentation/javascript/reference.html#KmlLayerOptions