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!!
Related
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));
}
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
I have what I think is a tricky question, but hopefully someone on here can keep me from tearing my hair out!
I'm currently trying to figure out how to overlay a bunch of markers on a google map overlaid with a hosted tileJson layer.
I'm also trying to follow this tutorial so that I can load pictures and text into the sidebar when the user clicks on any of the map points:
http://www.dougv.com/2007/07/12/using-ajax-to-update-a-non-map-div-via-google-maps-apis-gdownload-and-gmarker-onclick-event/
The tutorial is designed for maps api2 (I'm using 3) although it looks like it could easily be updated for api 3.
Right now, in part because of the javascript connector that simplifies importing the custom tiles, I can't seem to get markers to work, let alone connect them to databases, and access them from outside the map window.
https://mywebspace.wisc.edu/axler/Web%20Deep%20Map/Web%20Map%20Google%20Maps/index2.html
Live map tiles... at the above link. No points are working yet but I put some sample points in a list in the code.
Any suggestions? Here is my code.
<html>
<head>
<title>GOOGLE MAPS TILEMILL</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD6VG2UbuMLDCQoZ-GOPZl_PU7r1jXzejU&sensor=false">
</script>
<script
src='wax/dist/wax.g.min.js'
type='text/javascript'></script>
<link href='wax/theme/controls.css' rel='stylesheet' type='text/css' />
<link href='style.css' rel = 'stylesheet' type ='text/css' />
<link href='controls.css' rel = 'stylesheet' type = 'text/css' /><script>
var map;
var sidebar;
function pageLoad() {
sidebar = document.getElementById('sidebar');
addPoint(1, 'Howards Fish House', 46.72.30616121527788, -92.15);
addPoint(2, 'Rices Point', 46.78, -92.18);
addPoint(3, 'Wild Rice Seeding Area', 46.80, -92.22);
wax.tilejson('http://a.tiles.mapbox.com/v3/slre.st-louis-river-estuary.jsonp',
function(tilejson) {
var map = new google.maps.Map(
document.getElementById('mymap'), {
center: new google.maps.LatLng(46.72, -92.15),
disableDefaultUI: false,
zoom: 12,
panControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
streetViewControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP });
// Use this code to set a new layer as a baselayer -
// which means that it'll be on the bottom of any other
// layers and you won't see Google tiles
map.mapTypes.set('mb', new wax.g.connector(tilejson));
map.setMapTypeId('mb');
//I want to place a number of points on top of the MapBox hosted tile layer that is specified by wax.tilejson
});
}
function addPoint(pid, name, lat, lng) {
var point = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker(point);
map.setMap(marker);
var info = '<strong>' + name + '</strong><br />';
info += 'For more information, click the icon.';
google.maps.event.addListener(marker, 'mouseover', function() {
marker.openInfoWindow(info);
});
google.maps.event.addListener(marker, 'mouseout', function() {
map.closeInfoWindow();
});
google.maps.event.addListener(marker, 'click', function() {
details.innerHTML = '<em>Loading information ...</em>';
showDivInfo(pid);
});
}
</script>
</head>
<body onload="pageLoad()" onunload="pageUnload()">
<div id='sidebar'>
<h2>Explore the St. Louis River Estuary</h2>
<p>Click on the map points to learn about the stories and science that define the region!</p>
<p><span class='source'>Source: <a href='http://www.stlre.pebbleonline.com'>Main Web Page</a></span></p>
</div>
<div id='mymap'></div>
</body>
</html>
This map.setMap(marker); looks wrong.
should be
marker.setMap(map);
:)
I am reading points from a DB as JSON to create map markers and an unstructured list on a page. After adding some code to customize the list elements the map stopped showing the marker icons on first request - until a page reload is issued. Is this due to timing out from the API? Could the list object be built from the array after the map is loaded or is there some other way to speed up the code that might eliminate the problem? The map loaded markers fine with double this number of markers (300+) so I know problem is as a result of adding the formatting to the list object. No clustering required. A demo version of the page is available here
Signed a JS n00b. Thanks.
......
JSON POWERED GOOGLEMAP
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
var map;
var infoWindow = new google.maps.InfoWindow();
function initialize() {
var myLatlng = new google.maps.LatLng(49.57154029531499,-125.74951171875);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN,
streetViewControl: false
}
this.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
} /* end initialize function */
<!-- load points from database into Locations JSON -->
$(document).ready(function () {
initialize();
$.getJSON("map-service.php?action=listpoints", function(json) {
if (json.Locations.length > 0) {
for (i=0; i<json.Locations.length; i++) {
var location = json.Locations[i];
addMarker(location);
}
}
});
//define grn icon as closed
var greenicon = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
function addMarker(location) {
if(location.datesummit == "0000-00-00") {
var markerOptions = {map: map, title: location.name, position: new google.maps.LatLng(location.lat, location.lng),icon: greenicon};
//create marker info window content
var html='<B>'+location.name+'</B><BR> Register a summit here ';
//create list element text and onclick
$("<li class=\"notclimbed\">")
.html(location.name+"</li>")
.click(function(){
infoWindow.close();
infoWindow.setContent(html);
infoWindow.open(map, marker)
})
.appendTo("#list");
}
else{
var markerOptions = {map: map, title: location.name, position: new google.maps.LatLng(location.lat, location.lng)};
//create marker info window content
var html='<B>'+location.name+'</B><BR> Summitted: '+location.datesummit+'<BR> By:'+location.summitlog;
//create list element text and onclick
$("<li class=\"climbed\">")
.html(location.name+"</li>")
.click(function(){
infoWindow.close();
infoWindow.setContent(html);
infoWindow.open(map, marker)
})
.appendTo("#list");
}
var marker = new google.maps.Marker(markerOptions);
// add a listener to open an info window when a user clicks on one of the markers
google.maps.event.addListener(marker, 'click', function() {
infoWindow.close();
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}; // end of addmarker function
});
</script>
</head>
<body>
<div id="banner" {vertical-align:text-top;} >
<img src="test.jpg" alt="Logo" style="width:150px;height:150px;vertical-align:middle">
<img src="test.png" alt="Logo" style="vertical-align:middle">
</div>
<div id="map_canvas" >
Map Here!
</div>
<div id="mindthegap"></div>
<div id="list" > </div>
</body>
You need to make sure the map variable is initialized before you pass it to markerOptions.
A bit of overzealous debugging showed me that on the times that the page fails, the map is still undefined.
The $(document).ready() will usually occur before body.onload, so either put a call to initialize() at the very top of your $(document).ready(function() { ... }); or put the code for initialize in there.
Also, though not strictly necessary, you should consider encapsulating your map variable instead of using a global. What if you ever want to have 2 maps on one page?
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'
});