function javascript to set the position in google maps - javascript

Good afternoon,
I am developping a javaFX application and now I want to include on it a map using google maps
I have successfully dispaly the map on javaFX using this code on a html file
<!DOCTYPE html>
<html>
<head>
<title>Java-Buddy: Google Maps</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>#mapcanvas { height: 360px; width: 100%}</style>
</head>
<body>
<h1>Java-Buddy: Google Maps</h1>
<div id="mapcanvas">
<script type="text/javascript">
var latlng = new google.maps.LatLng(35.857908, 10.598997);
var Options = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), Options);
//var carMarkerImage = new google.maps.MarkerImage('resources/images/car.png');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.857908, 10.598997),
map: map,
draggable: false,
//icon: carMarkerImage,
title: "",
autoPan: true
});
</script>
</div>
</body>
</html>
I want to set the postition of the map using the controller class
I can do it with this event code
public void handle(ActionEvent actionEvent) {
webEngine.executeScript("document.myFunction(longitude, latitude)");}
I am new on javascript, and I want to know how to write the javascript function that allow me to set or to change the current position on the map
Thank you

function myFunction(longitude, latitude){
map.setCenter(new google.maps.LatLng(latitude, longitude));
}

Related

Mark locations on Google Maps

I'm fairly new to coding, and am experimenting on creating my own personal project. I was able to get a simple map up and running.
How would I create just for example all of the breweries in your area. Would I need to access an API and then create a marker for each one? OR just create a search bar within the map and Google "breweries"?
<div id="container">
<div id="googleMap" style="width:100%;height:400px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?
key="KEYHERE"&callback=myMap">
</script>
</div>
function myMap() {
var myCenter = new google.maps.LatLng(39.742043,-104.991531)
var mapCanvas = document.getElementById('googleMap');
var mapOptions = {center: myCenter, zoom: 9};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({content: "Denver" });
infowindow.open(map,marker);
}
If you have websites with examples or examples yourselves to help me out to learn I'd greatly appreciate it. I just don't know how it works. Thanks
i will share link which gives guidelines using this you create API key and just copy in the following script,
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
var uluru = {lat: -104.991531, lng: 39.742043};
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});
// The marker, positioned at your location
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Follow the following link,
https://developers.google.com/maps/documentation/javascript/adding-a-google-map

How to make the text fit a google marker?

I have written a code for displaying markers on the screen. And I have a text within the marker. The text is a 5 digit number which doesnot fit the marker. How can make the number to be within the marker?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Map API V3: Add Marker</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
body { margin: 20; padding: 20 }
#map_canvas{
width: 1024px;
height: 740px;
}
</style>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(47.576897,-122.419184),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var locations = [
[47.648197,-122.282784,11500,"0"]
];
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var shape = {
coord: [10, 10, 10, 20, 18, 20, 18 , 10],
type: 'poly'
};
for (i = 0; i < locations.length; i++) {
var myLatlng = new google.maps.LatLng(locations[i][0], locations[i][1]);
pinIcon = new google.maps.MarkerImage(
'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+locations[i][2]+'|808000|0000FF',
null,
null,
new google.maps.Point(140, 210),
new google.maps.Size(40, 60)
);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon:pinIcon,
shape:shape,
title: locations[i][3]
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
I want to print "11500" (locations[i][2]) inside my marker but when trying to do so it goes outside the marker.
The main issue is simply that you're using the wrong icon from the charts api. The pin type is of course not going to meet your needs for displaying the text; and you can't scale it after requesting it (as you seem to be trying in your code) since you'll be scaling the icon along with the text.
So two things to change:
MarkerIcon is deprecated, luckily it's easy to switch to Icon.
Use a different marker type that's designed for displaying text. Bubbles, probably.
Here is the relevant chunk of code that I just tested:
var myLatlng = new google.maps.LatLng(locations[i][0], locations[i][1]);
var pinIcon = {
url: 'http://chart.apis.google.com/chart?chst=d_bubble_text_small&chld=bb|'+locations[i][2]+'|C6EF8C|000000'
};
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: pinIcon,
title: locations[i][3]
});
I removed the shape attribute, because it's no longer valid with the new icon anyway. There is some image shifting during zoom, you can play with the attributes to fix that if you wish. And finally, there's different styles at that link to customize with.
Note: If this is to be used for a long time, know that the charts api is also deprecated, I think it's up until 2015.

google maps custom markerimage not working

For some reason whenever i try to use a custom markerimage for my map, it just displays the default. Here is my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps JavaScript API v3 Example: Marker Simple</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type=
"text/javascript"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(-25.363882,131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-25.363882,131.044922),
map: map,
title: 5,
icon: new google.maps.MarkerImage('http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png',
new google.maps.Size(24, 24),
new google.maps.Point(0,0),
new google.maps.Point(0, 24))
});
}
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 780px; height: 480px"></div>
</body>
</html>
The problem is in your title option, that must be a string. So replace it by "5" and it will work !
See demo : http://jsbin.com/uwudab/1/edit

How come JPG images runs ok in local browsers but not in Google Map on-line?

I have a Google Map application that we are trying to host it on Google Map's site.
The application work fine on my local web browsers, IE, Firefox, Chrome...etc, but when I upload the same application with the image file paths modified for the Google site; some of the JPG files loads, but the majority of them does not. That's also including some small .PNG files. I am a beginner programmer in Javascript, could some one tells me what's going on???
Please help...
My Codes:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=0.4, user-scalable=YES" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCyGkoZ07Vr67PDxHpbgD0Zxb-oP6-wqH8sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(50.011164, -113.039978);
var myOptions = {
zoom: 7,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions:
{style:google.maps.NavigationControlStyle.MEDIUM}
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var georssLayer = new google.maps.KmlLayer('https://sites.google.com/site/leastcostpath/home/AOI_70.kmz?attredirects=0&d=1');
georssLayer.setMap(map);
var compPos = new google.maps.LatLng(50.611833, -113.622775);
///*** Logo files does not load, work okay in local browsers *** ///
var compLogo = new google.maps.MarkerImage('https://sites.google.com/site/goosecreekgbt/home/prjmap/Goosecreeklogo.png',
new google.maps.Size(60,40),
new google.maps.Point(0,0),
new google.maps.Point(-60,40)
);
var compMarker = new google.maps.Marker({
position: compPos,
map: map,
icon: compLogo,
title:"Goosecreek - Blackie"
});
var ctyPos = new google.maps.LatLng(51.802294, -112.577147);
var ctyLogo = new google.maps.MarkerImage('https://sites.google.com/site/goosecreekgbt/home/prjmap/starlandlogo.png',
new google.maps.Size(62,20),
new google.maps.Point(0,0),
new google.maps.Point(-40,20)
);
var ctyMarker = new google.maps.Marker({
position: ctyPos,
map: map,
icon: ctyLogo,
title:"Starland County"
});
/// Site info ////
//M_Deli1
var latLng_Deli1 = new google.maps.LatLng(51.6320281, -112.3740475);
var contentString_Deli1 ='<div id="content"><div id="siteNotice"></div><div </a>
<img src="../Starlandlogo.JPG" </div><H2>Delia Hockey Rink</H2> <p>5KW Side-Mount
System<br /><br /> Panel: 21 Sharp 230W panels<br /> Inverter: Enphase Energy<br />
</p><div </a><img src="https://sites.google.com/site/goosecreekgbt/home/prjmap/
Delia_Arena.JPG" alt="5KW System"/ > <br /></div>';
var infowindow_Deli1 = new google.maps.InfoWindow({
content: contentString_Deli1
});
var marker_Deli1 = new google.maps.Marker({
position: latLng_Deli1,
map: map,
title:"Delia Hockey Rink"
});
google.maps.event.addListener(marker_Deli1, 'click', function() {
infowindow_Deli1.open(map, marker_Deli1);
});
///................ lots more site follows ...............//
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
The filename case is wrong. You should use:
https://sites.google.com/site/goosecreekgbt/home/prjmap/GooseCreekLogo.png
instead of:
https://sites.google.com/site/goosecreekgbt/home/prjmap/Goosecreeklogo.png
and same for the other images.
When hosted filenames are case sensitive, when local they are not. So, .JPG is not the same as .jpg.

Google Maps: Overlay point not showing up

Hey guys hoping for a little help here.
First I created a working map here: http://leongaban.com/_stack/googlemaps/firstmap.html
Pointer is shown on the spot, however I needed to remove the Map | Satellite | Terrain buttons.
Digging a bit deeper I found an example here disablingDefaults. However I could not get the map to work using my google.map.js file and my API key. So I just used the script from Google's example page.
Now my 2nd map I have the Map view options removed, but cannot get an overlay to show up :(
http://leongaban.com/_stack/googlemaps/
Please Help!
Goals:
Use my Google maps API key
Remove the Map view option buttons
Put overlay pointer on the location.
Code for my first map with my google API 2 key:
<head>
<title>Test Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyAXsNu2EwRNqKJn9OmC19WPkEJFM0r6ALk&sensor=true"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
// var myOptions = {
// zoom: 16,
// center: new google.maps.LatLng(40.750159, -73.976473),
// disableDefaultUI: true,
// mapTypeId: google.maps.MapTypeId.ROADMAP
// }
// var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// var point = new GLatLng(40.750159, -73.976473);
// map.addOverlay(new GMarker(point));
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(40.750159, -73.976473), 13);
map.setUIToDefault();
var myGeographicCoordinates = new GLatLng(40.750159, -73.976473)
map.addOverlay(new GMarker(myGeographicCoordinates));
// map.addOverlay(new GMarker(40.750159, -73.976473));
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 450px; height: 370px"></div>
</body>
UPDATED
WORKING CODE! THANKS STACKERS!!!
<head>
<title>Test Google Maps</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(40.750159, -73.976473),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myGeographicCoordinates = new google.maps.LatLng(40.750159, -73.976473);
var marker = new google.maps.Marker({
map: map,
position: myGeographicCoordinates,
title: "My First Test Marker",
visible: true
});
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 450px; height: 370px"></div>
</body>
There's a problem with how you define your latLng objects.
new GLatLng(40.750159, -73.976473);
That was used with Google Maps Api v2. Now you're using the latest api(v3), and in new api, this is how you should do it:
new google.maps.LatLng(40.750159, -73.976473);
EDIT: After your edit, i see there are some problems with the marker. In API v3 this is how you make a new marker:
var marker = new google.maps.Marker({
map: map,
position: latLng
});
Following code sets a map, disables default UI, sets a marker and put it on the map;
function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(40.750159, -73.976473),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myGeographicCoordinates = new GLatLng(40.750159, -73.976473);
var marker = new google.maps.Marker({
map: map,
position: myGeographicCoordinates
});
}
Now that you have moved to the v3 API, you want to change your marker creation code from:
map.addOverlay(new GMarker(myGeographicCoordinates));
to:
var marker = new google.maps.Marker({
map: map,
position: myGeographicCoordinates,
title: "My First Test Marker",
visible: true
});
If you want, you may also define a custom marker icon in the MarkerOptions that are passed to the marker constructor function and set the value equal to the path and name of an image file:
var marker = new google.maps.Marker({
map: map,
icon: "images/my-nice-marker.png",
position: myGeographicCoordinates,
title: "My First Test Marker",
visible: true
});

Categories