I'm trying to prototype some plotting on Google Maps API. I've followed the code here and think my code should work, however I get a blank screen. All of the objects have what appears to be the correct data but alas no dice. Any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps Test</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=<key removed>&sensor=false"></script>
<style type="text/css">
</style>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(33.001466, -97.354317);
var mapOptions = {
zoom:6,
center:myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
console.log(mapOptions);
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
console.log(map);
var routeCoordinates = [
new google.maps.LatLng(33.001466, -97.354317),
new google.maps.LatLng(33.025001, -97.352171),
new google.maps.LatLng(33.033219, -97.341700),
new google.maps.LatLng(33.049321, -97.320414),
new google.maps.LatLng(33.051335, -97.304020),
new google.maps.LatLng(33.059464, -97.298355),
new google.maps.LatLng(33.083919, -97.295609),
new google.maps.LatLng(33.111314, -97.291918),
new google.maps.LatLng(33.136042, -97.289257),
new google.maps.LatLng(33.182818, -97.287111)
];
console.log(routeCoordinates);
var routePath = new google.maps.Polyline({
path:routeCoordinates,
strokeColor:"#000000",
strokeOpacity:.90,
strokeWeight: 2,
editable:false
});
console.log(routePath);
routePath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas">
</div>
</body>
</html>
You map works for me if I remove the key and give the map div a size.
http://www.geocodezip.com/JohnSwaringenSO.html
Related
I was just playing around trying to do something with Google maps api in html however I ran into an issue. I am currently trying to place markers at specific positions, specifically customized markers that show as images not the regular markers however I can not figure out the code to do so. Currently this is an example of what I have attempted doing:
<html>
<head>
<title>Advanced map</title>
<script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script>
function init() {
blatlng = new google.maps.LatLng(41.275890,-73.874195);
myOptions = {
zoom: 5,
center: blatlng,
mapTypeId: google.maps.MapTypeId.Map };
map = new google.maps.Map(document.getElementById("italy"), myOptions);
blatlng1 = new google.maps.LatLng(-6.155889,106.640180);
myOptions1 = {
zoom: 4,
center: blatlng1,
mapTypeId: google.maps.MapTypeId.Map };
map = new google.maps.Map(document.getElementById("home"), myOptions1);
var marker = new google.maps.Marker({
position: blatlng,
icon: "jess1.jpg"
});
marker.setMap(map);
}
</script>
</head>
<body onLoad="init();">
<div id="italy" style="width:500px; height:300px"></div>
home
<div id="home" style="width:500px; height:300px"></div>
</body> </html>
This is the specific section where I am trying to place the custom marker however this also only calls the initial coordinates if it did work I just want to be able to place an image marker anywhere on either map:
var marker = new google.maps.Marker({
position: blatlng,
icon: "jess1.jpg"
});
marker.setMap(map);
}
SAPUI5 - Google map not showing. There are no error in Console but google map is not showing. Please find the code snippet that I have tried.
Index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script
src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyCEf_wLCEciMDw7tgnDGXptl94rdzLhW7Y&libraries=places"
type ="text/javascript"> </script>
<script id='sap-ui-bootstrap' type='text/javascript'
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'></script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("googlemaps");
var app = new sap.m.App({initialPage:"idgooglemaps1"});
var page = sap.ui.view({id:"idgooglemaps1",
viewName:"googlemaps.googlemaps",
type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
</script>
<style>
.myMap {
height: 100%;
width: 100% ;
}
</style>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
In View, I have included canvas
<HBox id="map_canvas" fitContainer="true" justifyContent="Center"
alignItems="Center" >
</HBox>
Controller: In event OnAfterRendering I have written the map initialization.
onAfterRendering: function() {
if (!this.initialized) {
this.initialized = true;
this.geocoder = new google.maps.Geocoder();
window.mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//This is basically for setting the initial position of the map, ie. Setting the coordinates, for the place by default
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
console.log(map);
var infowindow = new google.maps.InfoWindow;
var geocoder = new google.maps.Geocoder();
var marker = new google.maps.Marker({
map: map,
});
When you create a UI5 control, the ID assigned to the HTML elements is a generated ID('idgooglemaps1--map_canvas' in your case ). So an element with ID 'map_canvas' does not exist. You can however fetch the UI5 control & get the generated ID.
var oHBox = this.getView().byId("map_canvas");
var map = new google.maps.Map(document.getElementById(oHBox.getId()), mapOptions);
it seems that something is missing. in fact by means of the inspector, the right path for item my be longer than what oHBox.getId() returns.
for example:
container-TestGpsNew---View1--box1-container-TestGpsNew---View1--myAppGPS-0
oHBox.getId() = container-TestGpsNew---View1--box1,
container-TestGpsNew---View1--myAppGPS is the path for the View for example :
this.byId("myAppGPS").getId()
There is the remaining "-0" which I don't know where it is from. still searching.
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! :)
The title says the question. Now, is it good to use a counter that starts from zero and when it is 1 or more I wouldn't add a marker. Or should I try to make it such that when someone clicks on the map the old marker disappears and the new one is assigned? The following code is what I have so far.. Thanks for any kind of help.
Also, how can I access the longitude and latitude in the next page?
And about capturing the map into a blob, is it a different topic or it is also related?
Thanks
<!DOCTYPE html>
<html>
<head>
<title>Accessing arguments in UI events</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize();">
<div id="map-canvas"></div>
</body>
</html>
I would say its up to you and your application later how you handle the markers.
You can implement a counter, create a dragable marker, depends how the app will work later on.
How will your next page look like?
One simple way could be something like this:
I use addListenerOnce to call the placeMarker function only one time and during this i write the latitude and longitude in a form field.
now you can add action parameters plus a submit button and you can access the values on your next page.
Thats the fiddle + code:
http://jsfiddle.net/iambnz/LcKy2/
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListenerOnce(map, 'click', function(e) {
placeMarker(e.latLng, map);
// alert(e.latLng.toString());
document.getElementById("latitude").value = e.latLng.lat();
document.getElementById("longitude").value = e.latLng.lng();
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
I'm trying to run a simple google maps example (this is the example: https://developers.google.com/maps/documentation/javascript/examples/map-simple-async). I put the code in my .hmtl file but I`m getting a blank page. And, of course this seems to happen with all google examples (I save all my files on ANSI format).
The code is:
<!DOCTYPE html> <html> <head>
<title>Asynchronous Loading</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script>
function initialize()
{
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function loadScript()
{
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://maps.googleapis.com/maps/api/js?key=<MY_CODE>&sensor=false&callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script> </head> <body>
<div id="map-canvas"></div> </body> </html>
On that Google example they also include a link to a CSS file. You don't have any CSS (either inline or external) in the code you've put into the answer.
Look at their CSS file, you'll need something similar:
https://developers.google.com/maps/documentation/javascript/examples/default.css