I want to embed google-maps inside an existing vaadin webpage.
Problem: vaadin is written in java, so no html or javascript lines are coded.
There is an example on how to integrate maps using a static webpage: https://developers.google.com/maps/documentation/javascript/examples/map-simple
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" />
</body>
</html>
As you see, this requires <script> stuff inside the page.
Question: how can I include those script content using vaadin? Plus how could I then pass the geocoordinates dynamically to the javascript function?
(I don't want to use any vaadin addon for this, as I simple just want to show the map).
You can create a custom component in vaadin, and call the javascript code in the constructor of your custom component. This is easier said than done, so here's how you should be doing it:
Vaadin-UI page:
protected void init(VaadinRequest request) {
/****************************************************
* Create instance of custom component and set an id
***************************************************/
Map mapobject = new Map();
mapobject.setId("mapob");
..
..
..
..
}
Then create a new java class with the name Map.java (your component)
This class should be something like this:
import com.vaadin.annotations.JavaScript;
import com.vaadin.annotations.StyleSheet;
import com.vaadin.ui.AbstractJavaScriptComponent;
#JavaScript({ "myscript.js", "https://maps.googleapis.com/maps/api/js?v=3.exp"})
#StyleSheet({ "mystyle.css" })
//Extend AbstractJavaScriptComponent
public class Map extends AbstractJavaScriptComponent {
float param1=123;
float param2=456;
public Map() {
callFunction("myfunction",param1,param2); //Pass parameters to your function
}
}
Now, the last step is to create your js and css files which you have linked.
Create --> myscript.js and mystyle.css files
Define all your styling in the css as it is
In your JS, define your function as follows:
window.your_package_name_Map = function() { //Put correct package name
this.myfunction = function(latitude, longitude) { //Accept the parameters
var map;
//mapob is the id of your component
map = new google.maps.Map(document.getElementById("mapob"), {
zoom: 8,
center: {lat: latitude, lng: longitude}
});
google.maps.event.addDomListener(window, 'load', initialize);
}
};
This should do it. I hope I haven't missed anything
I don't really see why you could not use the addon, so you should use that:
Google Maps Add-on
Related
When I try to add my file 'myFile.kml' that I exported from google maps, it won't show any path to my map, while the example from google 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml' does work fine ?
Any idea of what am I missing here.
This is my HTML code:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height:100%
}
</style>
</head>
<body >
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
<script src="script.js"></script>
</body>
</html>
And my JS code:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 42.658324, lng: 21.163883},
zoom: 10
});
var ctaLayer = new google.maps.KmlLayer({
url: 'myFile.kml',
map: map
});
}
It seems you are trying to load KML file from localhost or local file system.
If so, basically you have two choices:
place the KML file on a public server where google server
can get to, since parsing of KML and rendering is done by
Google servers
utilize geoxml3 library which allows you to load KML file and
parse it hosted on localhost (see below example)
Example
The example demonstrates how to load and parse KML file from localhost using geoxml3 library:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 41.876, lng: -87.624 },
zoom: 10
});
var myParser = new geoXML3.parser({ map: map });
myParser.parse('cta.kml');
}
In HTML file add a reference to geoxml3 library, for example:
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
Plunker
I want to edit all google maps from a page with an external js file.
Let's say that I have 5 pages with 3 google maps in every page.
I want to add a circle in every google map.
How to do this from an external javascript file which will be loaded in every page?
Your base page with multiple maps, and an external JS file:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var maps = [];
function drawMaps(){
for(var i = 1; i<4;i++){
drawMap(i);
}
}
function drawMap(num){
var mapcontainer=document.getElementById("map"+num);
var options={
center: new google.maps.LatLng(40.266323, -73.996579),
zoom:8,
maptypeid:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(mapcontainer,options);
maps.push(map);
var circle=new google.maps.Circle({
map:map,
center:new google.maps.LatLng(40.266323, -73.996579),
radius:10000,
fillColor:"blue",
border:0,
strokeWeight:0
});
}
window.addEventListener("load", drawMaps);
</script>
<script src="externalJS.js"></script>
</head>
<html>
<body>
<div style="height:400px;width:400px" id="map1"></div>
<div style="height:400px;width:400px" id="map2"></div>
<div style="height:400px;width:400px" id="map3"></div>
</body>
</html>
Note the array which serves as an accessible bin for all maps. Also notice the window listener for "load."
The external JS file contents:
function addToAllMaps(){
if(maps!=undefined){
for (var i in maps){
var map = maps[i];
var circle=new google.maps.Circle({
map:map,
center:new google.maps.LatLng(40.266323, -73.996579),
radius:1000000,
fillColor:"red",
border:0,
strokeWeight:0
});
}
}
}
window.addEventListener("load", addToAllMaps);
Note how it references the maps array and applies the red circle to each in a loop. Also note the window listener for load. By using this event we can add multiple events, in the order the events were defined, in this case, the order in which scripts were loaded.
I am following the the steps given in this link
https://developers.google.com/maps/documentation/javascript/tutorial
I am getting error after load can you tell me where I wrong ? I already generate key ?
fiddle
http://jsfiddle.net/p3kcztvb/1/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyATC35pv00Ga3hRxP4t5W7NtM9as48PGVQs">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
Following error explain itself.
"provided key is not a valid Google API Key,"
Generate correct key
To create your API key:
Visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account.
Click the Services link from the left-hand menu.
Activate the Google Maps JavaScript API v3 service.
Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section. Maps API applications use the Key for browser apps.
here
Markup Code as follow:-
// Adds a marker with popup window information
var marker1Latlng = new google.maps.LatLng(35.65654,-106);
var contentString1 = 'I love New Mexico! More about the Land of Enchantment';
var infowindow = new google.maps.InfoWindow({
content: contentString1
});
var marker1 = new google.maps.Marker({
position: marker1Latlng,
map: map,
title: 'New Mexico'
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow.open(map,marker1);
});
//End of Add Marker code
Hi Kanika in Fiddle it seems like the API key you are using is not a valid key. You might need to regenerate the API key for Google Maps API Engine from your Google Console.
Change this code lines - basically you don't need a api key in here
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyATC35pv00Ga3hRxP4t5W7NtM9as48PGVQs">
</script>
Replace with
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp">
</script>
I'm trying to migrate a simple Google Maps project (literally done from an example on their site) over to an AngularJS project. Let me preface this by saying that I'm new to both AngularJS and web dev, so please be kind :) I have a simple project up at https://github.com/eroth/angular-web-app (main files below) where I go from an initial commit using a Google Maps tutorial over to trying to convert it to an AngularJS app, but haven't been able to get it to work, although I've verified that my $scope.init() function in my MapController.js file is being called from my map.html file.
My question is two-fold: is it the case that something's wrong with my code, or do I need something like this (which looks to be very good): http://nlaplante.github.io/angular-google-maps/? I'm working on incorporating this into my project on another branch, but am trying to figure out if it's an issue with my existing code, or if I'd need something like this library to get it to work with AngularJS. If it's the latter, why? Apologizes in advance if it's some exceedingly simple mistake I'm making; as I said I'm pretty new to all this, although I did go through a few AngularJS tutorials and it seems great.
This is my map.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- INCLUDE REQUIRED THIRD PARTY LIBRARY JAVASCRIPT AND CSS -->
<script type="text/javascript" src="js/angular.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<!-- INCLUDE APPLICATION SPECIFIC CSS AND JAVASCRIPT -->
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true&language=en">
</script>
<script type="text/javascript" src="js/web-app/app.js"></script>
<script type="text/javascript" src="js/web-app/controllers/mainController.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container main-frame" ng-app="WebApp" ng-controller ="mainController" ng-init="init()">
<div id="map-canvas"/>
</div>
</body>
</html>
And this is my MapController.js file:
app.controller("mainController", function($scope, $http){
$scope.initialLocation;
$scope.siberia = new google.maps.LatLng(60, 105);
$scope.newyork = new google.maps.LatLng(40.7463, -73.9913);
$scope.browserSupportFlag = new Boolean();
$scope.map;
$scope.retina = window.devicePixelRatio > 1;
$scope.init = function () {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
console.log('In main init');
//first test——map uses hard-coded location, next will get user's location and pull deals
$scope.map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
// Try W3C Geolocation (Preferred)
if (navigator.geolocation) {
$scope.browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
$scope.initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var currentLat = position.coords.latitude;
var currentLon = position.coords.longitude;
$scope.map.setCenter($scope.initialLocation);
// performApiCall(currentLat, currentLon);
//definite custom map pin for user location & plot it on map
var pinColor = "5ea9ff";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.6|0|" + pinColor + "|0|_|k",
new google.maps.Size(25, 60),
new google.maps.Point(0,0),
new google.maps.Point(10, 24));
var marker = new google.maps.Marker({
position: $scope.initialLocation,
map: $scope.map,
icon: pinImage,
});
}, function() {
handleNoGeolocation($scope.browserSupportFlag);
});
}
// Browser doesn't support Geolocation
else {
$scope.browserSupportFlag = false;
handleNoGeolocation($scope.browserSupportFlag);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
alert("Geolocation service failed.");
$scope.initialLocation = newyork;
} else {
alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
$scope.initialLocation = siberia;
}
map.setCenter($scope.initialLocation);
}
};
google.maps.event.addDomListener(window, 'load', $scope.init);
});
Thanks in advance for any help!
There are a couple of things wrong with your code. First, you are already calling the init() function of your scope in your mainController via defining it in the DOM with ng-init.
<div class="container main-frame" ng-app="WebApp" ng-controller ="mainController" ng-init="init()">
Which means you do not need the listener for window to be loaded to call the $scope.init - because this would run the function twice and in turn initialize your map twice. Remove the listener.
Second, there are a few instances where variables are being called which are actually part of the $scope object (newyork Ln 57, serbia Ln 60 and map Ln 62) - hence will throw a not defined error.
And lastly, you must set a height for the div container of your map in the CSS to actually see the map.
#map-canvas { height : 200px; }
/* if you want to set the height as a percentage of the parent div, remember to give a height to the parent div as well */
As for the second part of your question, I would definitely look into using what's already built. I haven't used the library you linked to, but if you say it's very good - why try to re-invent the wheel?
So I'm working on a custom google maps tour type application and I'm wondering how to get media to popup when I click a link within a google maps marker. Ideally this is what I would like to happen:
1. User clicks on marker and the normal white box comes up like on real Google Maps.
2. Within that text box I would like to have a button that will launch media that I have stored on a SQL server somewhere. This media could be audio, pictures, or video.
The code I have so far is below. If anyone could let me know how to do this, or point me in the right direction that would be awesome!
Thanks
<!doctype html>
<html>
<head>
<title>HuskyWalk Application Demo</title>
<meta name="viewport" conmtent="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #mapcanvas {
margin: 0;
padding: 0;
height: 98%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var iteCoords = new google.maps.LatLng(41.806501, -72.252769);
//var mapCoords = new google.maps.LatLng(navigator.getCurrentPosition().coords.latitude, navigator.getCurrentPosition().coords.longitude);
//var mapCoords = new navigator.getCurrentPosition().coords;
function initialize() {
//var position = new navigator.geolocation.getCurrentLocation(showPosition);
var mapOptions = {
zoom: 18,
center: iteCoords,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
google.maps.event.addListenerOnce(map, "bounds_changed", watchStart);
var marker = createMarker(); //creates marker
}
function watchStart() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function createMarker() {
var marker = new google.maps.Marker({
position: iteCoords,
map: map,
title: 'ITEB',
});
google.maps.event.addListener(marker, "click", onMarker_clicked);
return marker;
}
function onMarker_clicked() {
alert(this.get('id'));
}
</script>
</head>
<body onload="initialize()">
<div id="mapcanvas"></div>
<div>
<p>Maps provided by Google Maps</p>
</div>
</body>
</html>
I know there is going to need to be some stuff in the onMarker_Clicked() method most likely, I'm just not sure what.
You'll want to use an InfoWindow and call its open() method from the click event handler.
See also the section in the google maps developer guide https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows