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.
Related
I want to connect my dynamic data with google map marker here is my code
this is my mapdata and listdata both having same value which coming from the php
latitude: "19.1904917"
logitude: "72.8639419"
name: "Monkey d luffy"
using this latitude and logitude i m showing google marker on map for show marker data i used this code
var defaultLatlng = new google.maps.LatLng(19.0822508,72.8812041);
var myOptions = {
zoom: 10,
panControl:false,
streetViewControl:false,
center: defaultLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
},
};
loadMap();
function loadMap(){
console.log('loadMap');
// create new map make sure a DIV with id myMap exist on page
map = new google.maps.Map(document.getElementById("myMap"), myOptions);
geocoder = new google.maps.Geocoder();
//oms = new OverlappingMarkerSpiderfier(map,{markersWontMove: true, markersWontHide: true});
// create new info window for marker detail pop-up
$.each(mapdata.locations,function(key,val){
loadMarker(val);
});
$.each(listdata.locations,function(key,val){
loaddata(val);
});
}
this is my loadmarker function which showing marker on google maps
function loadMarker(markerData)
{
var myLatlng = new google.maps.LatLng(markerData['latitude'],markerData['logitude']);
console.log(myLatlng);
// create new marker
var marker = new google.maps.Marker({
map: map,
title: markerData['address'],
position: myLatlng
//animation:google.maps.Animation.BOUNCE
});
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
gmarkers.push(marker);
var marker_num = gmarkers.length-1;
google.maps.event.addListener(marker, 'click', function() {
showMarker(markerData,marker);
});
}
this is my loaddata function which is showing my data on UI
function loaddata(markerData)
{
listitem += "<div class='expert_name'>"
+markerData['name']+
+"</div>"
$('#_mymaplist').html(listitem);
}
this is my html where i add all this thing
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Multiple Markers Google Maps</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="mymap" style="width: 800px; height:500px;"></div>
<div id="_mymaplist" style="width: 800px; height:500px;"></div>
</body>
</html>
i want when i hover name from _mymaplist div then google marker color has to change for the example here i only give one data but there will be more than one
i checked many example like this but i won't work for me
because this example having same function for loading the data..but in my case i have 2 function to load data. i also can use 1 function but problem is that map marker loading all data at one time and the list data is using pagination form loading data....so that y i can't use same function for loading data Please help me
Because of the issue of pagination if you have to use 2 functions, you can use the Styled Marker in the loaddata() function itself where you are defining your individual markers. For that you will need to use set(property, value) methods.
this.styleIcon.set('color', '00fff0');
This has to be defined inside your loaddata() function where your listitems are initialized.
function createStyle() { return new StyledIcon(StyledIconTypes.BUBBLE,{color:"#95AA7B",text:"click me!",fore:"#ffffff"}); }
listitem += "<div class='expert_name'>"
+markerData['name']+
+"</div>"
$('#_mymaplist').html(listitem);
google.maps.event.addDomListener(marker4,"click", function(o){
this.styleIcon.set("fore","#ffffff");//test color
this.styleIcon.set("color","#C2554D");// background color
this.styleIcon.set("text","color changed");
});
Hope this would Help!!
I have the following code for a map that I'm working on and I'd like to see if I can put custom markers throughout. The problem is that I can't seem to get the first marker to change position no matter if I input latitude and longitude. Perhaps I'm entering the information incorrectly.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>UmApp</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=key"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(41.160531, -73.256303);
var mapOptions = {
zoom: 16,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: 41.159317, -73.257443,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
try
var marker = new google.maps.Marker({
position: new google.maps.LatLng(41.159317, -73.257443);
map: map,
title: 'Hello World!'
});
I still cannot make comments, so I'll answer your comment question here:
As Kostrzak said, you would need to write
var marker = new google.maps.Marker({
position: new google.maps.LatLng(41.159317, -73.257443),
map: map,
title: 'Hello World!'
});
(Careful with the semicolon instead of the comma. Although it should work anyway, it may throw a bunch of errors on some IDEs).
The position inside the Marker object is expecting coordinates, but not in any form. It needs to have those coordinates given in a specific way: As a LatLng object. Because of this, you need to set those coordinates using the Google JavaScript library, which creates an object with your specified coordinates:
position: new google.maps.LatLng(41.159317, -73.257443)
Here you have SET the position of the marker. If you want to change it, you just need to set
marker.position = new google.maps.LatLng({newLat}, {newLng});
If you opened the console, you'd see a bunch of errors thrown by the position line: "Uncaught SyntaxError: Unexpected token - ". Console logs are pretty helpful most of the times, so use them!
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));
}
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.
I'm experimenting with QtWebkit and Google Maps. The problem I've run into is calling C++ slots from the QWebView.
The page displayed in the QWebView is a modified Google Maps example:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Event Simple</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript">
function initialize() {
var myOptions = {
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'),
myOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'test'
});
google.maps.event.addListener(marker, 'click', function() {
//if (map.getZoom() == 8) {
// map.setZoom(4);
// } else {
// map.setZoom(8);
// }
window.maiWi.showList();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
maiWi is the QMainWindow object which contains the slot showList() I want to call and which has been added to the Javascript window object.
If I add another element to the web page with the attribute onclick="maiWi.showList()", then the slot gets called and everything is well. However, I want to call the slot when the Maps marker gets clicked. The marker, however doesn't seem to respond to click events in QWebView. Even the commented-out example code doesn't work.
In Chrome, the event listener gets called and does what it's supposed to, but in QWebView nothing happens.
It turns out that I should turn off optimized rendering for map markers. When adding optimized:false to the marker declaration, then things start to work:
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
optimized: false,
title: 'test'
});