The map is loaded correctly without marker object ,But it doesn't load when I add Marker object on this structure here my
<!doctype html>
<html>
<head>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<script type="text/javascript">
$.geolocation.find(function(location) {
var lat = location.latitude;
var lng = location.longitude;
var map = new google.maps.Map($('#mapDiv').get(0), {
center: new google.maps.LatLng(lat, lng),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var pinColor = "FE7569";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35))
var marker= new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
icon: pinImage,
shadow: pinShadow
});
});
</script>
</head>
<body>
<div id="mapDiv" style="width:700px; height: 500px;"></div>
</body>
</html>
The script which is included in the page script.js
(function($){
$.extend($.support,{
geolocation:function(){
return $.geolocation.support();
}
});
$.geolocation = {
find:function(success, error, options){
if($.geolocation.support()){
options = $.extend({highAccuracy: true, track: false}, options);
($.geolocation.object())[(options.track ? 'watchPosition' : 'getCurrentPosition')](function(location){
success(location.coords);
}, function(){
error();
}, {enableHighAccuracy: options.highAccuracy});
}else{
error();
}
},
object:function(){
return navigator.geolocation;
},
support:function(){
return ($.geolocation.object()) ? true : false;
}
};
})(jQuery);
I need to include the marker with the google map
another issue that this code is running only on Firefox and IE ,but it doesn't run on Google Chrome
Take a look at this, I think this is solved, your error was in the url parameters and now it is working in Chrome too. You can also change the color of your marker by replacing FE7569 according to your needs.
Eg: 73B5EB or 33DE61
Another thing you can do is to put a text in the marker like this:
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=You%20are%20here|FE7569
Eg:
Live demo of your code but corrected:
http://jsfiddle.net/oscarj24/sPsxh/
Hope this helps :-)
Related
This question has been answered before, however when I implement the stated solution it does not work for me. Any guidance would be greatly appreciated:)
function geolocateFunc(){
GMaps.geolocate({
success: function(position) {
map.setCenter(position.coords.latitude,position.coords.longitude);
map.addMarker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
scaledSize: new google.maps.Size(150, 150),
lat: position.coords.latitude,
lng: position.coords.longitude,
infoWindow: {content: "<strong>This is my current location</strong>"},
});
},
error: function(error) {
alert('Geolocation failed: '+error.message);
},
not_supported: function() {
alert("Your browser does not support geolocation");
},
always: function() {
alert("Done!");
}
});
}
I tried the scaledSize function and it does not see to work
Try instantiating a new Marker rather than the addMarker method. If still no joy see if the "optimized" attribute setting makes adifference
Courtesy w3schools: -
<!DOCTYPE html>
<html>
<body>
<div id="map" style="width:100%;height:500px"></div>
<script>
function myMap() {
var mapCanvas = document.getElementById("map");
var myCenter = new google.maps.LatLng(51.508742,-0.120850);
var mapOptions = {center: myCenter, zoom: 5};
var map = new google.maps.Map(mapCanvas,mapOptions);
var pinkball = {size: new google.maps.Size(100, 100),
scaledSize: new google.maps.Size(100, 100),
url: "pinkball.png"};
var marker = new google.maps.Marker({
position: myCenter,
icon: pinkball
});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
-->
</body>
</html>
My Google map works okay but the mouseover and mouseout are not showing the div. Can anyone see my mistake or what I have done wrong? I have jquery installed on my host server.
<html>
<head>
<title>Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="jquery/jquery.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var LatLng = new google.maps.LatLng(51.620946, -8.890981);
var mapOptions = {
zoom: 12,
center: LatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var contentstring = '<div style="height:50px;background-color:red;width:50px;">Hello</div>';
var LatLng = new google.maps.LatLng(51.620946, -8.890981);
var marker_0 = new google.maps.Marker({
position:LatLng,
map:map,
descrip:contentstring,
link:'https://www.google.ie/'
})
google.maps.event.addListener(marker_0,'mouseover',function(){
tooltip.show(this.descrip);
});
google.maps.event.addListener(marker_0,'mouseout',function(){
tooltip.hide();
});
google.maps.event.addListener(marker_0,'click',function(){
window.open(this.link);
});
}
$(document).ready(function(){
initialize();
})
</script>
</head>
<body>
<div id="map-canvas" style="width:600px;height:400px;border:solid 1px red;"></div>
</body>
</html>
Thanks in advance for any help.
From the code above, It doesn't look like you have defined the variable 'tooltip'
Instead of passing descrip and link properties to your marker_0, try just passing the title and it works. Like this...
function initialize() {
var LatLng = new google.maps.LatLng(51.620946, -8.890981);
var mapOptions = {
zoom: 12,
center: LatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentstring = '<div style="height:50px;background-color:red;width:50px;">Hello</div>';
var marker_0 = new google.maps.Marker({
position:LatLng,
map:map,
title: contentstring
//descrip:contentstring,
//link:'https://www.google.ie/'
})
/*
** HAVE COMMENTED THIS BIT OUT AS THE MARKER ABOVE WILL WORK AS A TOOL TIP **
google.maps.event.addListener(marker_0,'mouseover',function(){
tooltip.show(this.descrip);
});
google.maps.event.addListener(marker_0,'mouseout',function(){
tooltip.hide();
});
google.maps.event.addListener(marker_0,'click',function(){
window.open(this.link);
}); */
}
There is a Simple Marker Exmaple Here
The properties that can be used for the marker is listes in the DOCS.
Hope this helps.
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));
}
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
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
});