My team and I are working on a group project that plots incidents around College Station, TX. Most of the markers are located at one coordinate, so we're trying to integrate the OverlappingMarkerSpidifier code with ours, but I'm not quite sure how to do it. Could anyone help with this?
The code works for the most part, or at least the markers populate where they need to and I can get an infowindow to pop up for the topmost marker. The main issue is figuring out to transform this (from the above website):
for (var i = 0; i < window.mapData.length; i ++) {
var datum = window.mapData[i];
var loc = new L.LatLng(datum.lat, datum.lon);
var marker = new L.Marker(loc);
marker.desc = datum.d;
map.addLayer(marker);
oms.addMarker(marker); // <-- here
}
into something that will loop through our data instead.
Note: The original code had JSON values within it, but those have been removed for this post. Additionally, since this will probably make a difference, we hard coded our JSON data (I know, it's terrible practice, but we needed to do it at the time to start working with the map code itself)
<html>
<head>
<style>
#mapcanvas {
height: 300px;
margin: 0px;
padding: 300px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<script>
//Load and center map on college station
var map;
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(30.628769, -96.334816)
};
map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
//Create info window
var infowindow = new google.maps.InfoWindow({
content: ''
});
//Get and parse JSON data
$(document).ready(function(){
$("button").click(function(){
$.each(data.items, handleItem);
});
});
function handleItem(i, items) {
$('#placeholder').append("<li>Coord: " + items.lat + items.long + "Category:" + items.category + "</li>");
//Info window content
var contentString = '<div id=content">'+
'Incident Notice'+
'</div>'+
'<p id = "firstHeading" class="firstHeading">' + items.category + '<br></br>' + items.lat + ", " + items.long + '</p>' +
'</div>'
'Location: Texas A&M'
var img = 'http://www.google.com/mapfiles/marker.png';
var myLatLng = new google.maps.LatLng(items.lat, items.long);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: img
});
//Create info window on click and close when clicking a new marker
var oms = new OverlappingMarkerSpiderfier(map);
oms.addListener('click', function(marker, event) {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
oms.addListener('spiderfy', function(markers) {
for(var i = 0; i < markers.length; i ++) {
markers[i].setIcon(iconWithColor(spiderfiedColor));
markers[i].setShadow(null);
}
iw.close();
});
oms.addListener('unspiderfy', function(markers) {
for(var i = 0; i < markers.length; i ++) {
markers[i].setIcon(iconWithColor(usualColor));
markers[i].setShadow(shadow);
}
});
oms.addMarker(marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="mapcanvas"></div>
<button>Get and Parse</button>
<p>
</p>
<ul id="placeholder">
</ul>
</body>
</html>
There are many problems with your code:
declare oms as global variable, only one instance, this will facilitate the use;
iconWithColor is not defined;
shadow is not defined;
on spiderfy listener, you are calling iw.close();. iw is not defined and is not the added in click listener. Change body of function to infoWindow.close();;
Se an example, may can help you:
<html>
<head>
<style>
#mapcanvas {
height: 300px;
margin: 0px;
padding: 300px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<script>
var map;
var oms;
//Create info window (need only one)
var infowindow = new google.maps.InfoWindow();
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(30.628769, -96.334816)
};
//Load and center map on college station
map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
oms = new OverlappingMarkerSpiderfier(map);
// listeners need to be registered only once
oms.addListener('click', function(marker, event) {
infowindow.setContent(marker.description);
infowindow.open(map, marker);
});
oms.addListener('spiderfy', function(markers) {
for(var i = 0; i < markers.length; i++) {
// markers[i].setIcon(iconWithColor(spiderfiedColor));
markers[i].setShadow(null);
}
infowindow.close();
});
oms.addListener('unspiderfy', function(markers) {
for(var i = 0; i < markers.length; i++) {
// markers[i].setIcon(iconWithColor(usualColor));
// markers[i].setShadow(shadow);
}
});
function handleItem(items) {
$('#placeholder').append("<li>Coord: " + items.lat + items.long + " Category: " + items.category + "</li>");
//Info window content
var contentString = '<div id=content">'+
'Incident Notice'+
'</div>'+
'<p id = "firstHeading" class="firstHeading">' + items.category + '<br></br>' + items.lat + ", " + items.long + '</p>' +
'</div>'
'Location: Texas A&M'
var img = 'http://www.google.com/mapfiles/marker.png';
var myLatLng = new google.maps.LatLng(items.lat, items.long);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: img
});
// to be possible in "click" show specific content
marker.description = contentString;
oms.addMarker(marker);
}
//Get and parse JSON data
$(document).ready(function(){
$("button").click(function(){
$.each(data.items, handleItem);
});
});
var item = {
lat: 30.628769,
long: -96.334816,
category: "Category - "
};
// for test only
for(var i = 5; i >= 0; i--) {
item.category += i;
handleItem(item);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="mapcanvas"></div>
<button>Get and Parse</button>
<p></p>
<ul id="placeholder">
</ul>
</body>
</html>
Related
Can someone please help me how to bind a custom image marker to this script?
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="scripts/downloadxml.js"></script>
<style type="text/css">
html, body { height: 100%; }
</style>
<script type="text/javascript">
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
// global "map" variable
var map = null;
var markerclusterer = null;
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
// map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
function initialize() {
// create the map
var myOptions = {
zoom: 7,
center: new google.maps.LatLng(52.13263,5.29127),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data from example.xml
downloadUrl("dataxml.cfm", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var marker_image = parseFloat(markers[i].getAttribute("markerimage"));
var image = {
url: marker_image,
size: new google.maps.Size(71, 132),
origin: new google.maps.Point(0, 0),
scaledSize: new google.maps.Size(71, 132)
};
var point = new google.maps.LatLng(lat,lng);
var id = markers[i].getAttribute("id");
var country = markers[i].getAttribute("country");
var html="<b>"+country+"</b><br><span style='color:white'>"+id+"</span>";
// create the marker
var marker = createMarker(point,country+" "+id,html);
}
markerCluster = new MarkerClusterer(map, gmarkers);
});
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
// from the v2 tutorial page at:
// http://econym.org.uk/gmap/basic3.htm
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 752px; height: 600px"></div>
</body>
</html>
The XML is simple:
<markers>
<marker markerimage="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" id="value" lat="value" lng="value" country="value" />
I have tried to add "icon: image" to the create marker part, but I can't figured it out.I have tried to add "icon: image" to the create marker part, but I can't figured it out.
You need to pass the custom icon into the createMarker function:
// create the marker
var marker = createMarker(point, country + " " + id, html, marker_image);
updated createMarker function:
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html, icon) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: icon,
// map: map,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>';
}
proof of concept fiddle
code snippet:
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(40.735657, -74.1723667),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data from dataxml.cfm
// downloadUrl("dataxml.cfm", function(doc) {
var xmlDoc = xmlParse(xmlData);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var marker_image = markers[i].getAttribute("markerimage");
var image = {
url: marker_image,
size: new google.maps.Size(71, 132),
origin: new google.maps.Point(0, 0),
scaledSize: new google.maps.Size(71, 132)
};
var point = new google.maps.LatLng(lat, lng);
var id = markers[i].getAttribute("id");
var country = markers[i].getAttribute("country");
var html = "<b>" + country + "</b><br><span style='color:blue'>" + id + "</span>";
// create the marker
var marker = createMarker(point, country + " " + id, html, marker_image);
}
markerCluster = new MarkerClusterer(map, gmarkers);
// });
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html, icon) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: icon,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>';
}
// global variables
var side_bar_html = "";
var gmarkers = [];
var map = null;
var markerclusterer = null;
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
google.maps.event.addDomListener(window, "load", initialize);
//New York, NY, USA (40.7127837, -74.0059413
//Newark, NJ, USA (40.735657, -74.1723667)
var xmlData = '<markers><marker markerimage="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" id="NYC" lat="40.7127837" lng="-74.0059413" country="USA" /><marker markerimage="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" id="NWK" lat="40.735657" lng="-74.1723667" country="USA" /></markers>';
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<div id="map_canvas"></div>
I'm using the Google Places API to make entering destinations easy. Ideally, I would like the user to be able to start entering the semantic name (e.g. Stanford University) and have Places API autosuggest an option. I am using results returned by the Geocoder to get the structured place data. However, I notice that if I enter in a query for "Stanford University", the returned geocoded result does not contain a key for street_number. Does anyone know how you can use Places API to geocode a place into a geocode result that includes a street_number?
If I lookup Stanford University with the places service, it returns the place_id ChIJneqLZyq7j4ARf2j8RBrwzSk. A getDetails request with that place_id returns an address components array with an entry with type street_number.
proof of concept fiddle
code snippet:
var map;
var infowiandow;
var service;
var data_id;
var count = 1;
var request;
var placeIDs = [];
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(19.12455, 72.929158),
zoom: 11
});
infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var errorCnt = 0;
var successCnt = 0;
for (var i = 0; i < data.length; i++) {
placeIDs[i] = data[i]['place_id'];
infoWindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
service.getDetails({
placeId: placeIDs[i]
}, function (place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
successCnt += 1;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
title: place.name
});
for (var i = 0; i < place.address_components.length; i++) {
for (var j = 0; j < place.address_components[i].types.length; j++) {
if (place.address_components[i].types[j] == "street_number") {
document.getElementById('info').innerHTML += "street_number:" + place.address_components[i].long_name + "<br>";
}
}
}
console.log(place);
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(place.name + "<br>" + place.types + "<br><a href='" + place.url + "'>url</a>");
infowindow.open(map, this);
});
document.getElementById('success').innerHTML += "placename=" + place.name + " successCnt=" + successCnt + "<br>";
map.fitBounds(bounds);
} else {
document.getElementById('info').innerHTML += "[" + errorCnt + "] status=" + status + " successCnt=" + successCnt + "<br>";
errorCnt += 1;
}
});
}
/* }); */
}
var data = [{
place_id: "ChIJneqLZyq7j4ARf2j8RBrwzSk"
}];
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="success"></div>
<div id="info"></div>
<div id="map-canvas"></div>
<h4 id="place_id"></h4>
I am using the following code to display my map plus 2 seperate div. One has a list of features (sidebar) and one has the result of the infowindow click event.
I can get the expected behavior when I click on the map, but the sidebar features, while correctly label on the map, do not update the "BottomInfoWindow" DIV. I cannot seem to get the right place to make that happen. On a less related note, I also would like to show the fusion table card in the "BottomInfoWindow" DIV, but haven't figured out how to incorporate that into a google map. If you know of an example that would be great too.
<style type="text/css">
html, body, #map_canvas {
width: 900px;
height: 550px;
margin: 0;
padding: 0;
}
.infowindow * {font-size: 90%; margin: 0}
.auto-style1 {
font-size: small;
}
</style>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<!-- Initialize -->
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});
var tableId ='1aa5D73bkLrD6aY7W7MaU5C4z-v6HRM6aWnhg19N5';
function createSidebar() {
//set the query using the parameter
var queryText = encodeURIComponent("http://www.google.com/fusiontables/gvizdata?tq=SELECT * FROM "+tableId);
var query = new google.visualization.Query(queryText);
var queryText = encodeURIComponent("SELECT 'Sample Location', 'X', 'Y' FROM "+tableId);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//set the callback function
query.send(getData);
}
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(createSidebar);</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var FTresponse = null;
//define callback function, this is called when the results are returned
function getData(response) {
if (!response) {
alert('no response');
return;
}
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
FTresponse = response;
//for more information on the response object, see the documentation
//http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
numRows = response.getDataTable().getNumberOfRows();
numCols = response.getDataTable().getNumberOfColumns();
//concatenate the results into a string, you can build a table here
fusiontabledata = "<table><tr>";
// for(i = 0; i < numCols; i++) {
fusiontabledata += "<th>" + response.getDataTable().getColumnLabel(0) + "</th>";
// }
fusiontabledata += "</tr><tr>";
for(i = 0; i < numRows; i++) {
// for(j = 0; j < numCols; j++) {
fusiontabledata += "<td><a href='javascript:myFTclick("+i+")'>"+response.getDataTable().getValue(i, 0) + "</a></td>";
// }
fusiontabledata += "</tr><tr>";
}
fusiontabledata += "</table>"
//display the results on the page
document.getElementById('sidebar').innerHTML = fusiontabledata;
document.getElementById('BottomInfoWindow').innerHTML = event.infoWindowHtml;
}
function myFTclick(row) {
//var description = FTresponse.getDataTable().getValue(row,0);
var name = FTresponse.getDataTable().getValue(row,0);
var lat = FTresponse.getDataTable().getValue(row,2);
var lng = FTresponse.getDataTable().getValue(row,1);
var position = new google.maps.LatLng(lat, lng);
openInfoWindow(name, position);
}
function openInfoWindow(name, position) {
// Set up and create the infowindow
if (!infoWindow) infoWindow = new google.maps.InfoWindow({});
infoWindow.setOptions({
content: '<div class="FT_infowindow"><h3>' + name +
'</h3></div>',
pixelOffset: new google.maps.Size(0, 2),
position: position
});
// Infowindow-opening event handler
infoWindow.open(map);
}
var map = null;
var infoWindow = null;
function initialize() {
//SET CENTER
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(47.68635054275792, -117.21382726097107),
zoom: 16,
scrollwheel:false,
mapTypeControl: true,
streetViewControl: false,
overviewMapControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
// CONTROLS
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeId: 'hybrid'
});
layer = new google.maps.FusionTablesLayer({suppressInfoWindows: true,
query: { from: tableId, select: 'Y, X'}});
layer.setMap(map);
google.maps.event.addListener(layer, "click", function(event) {
infoWindow.close();
// alert("click:"+event.latLng+","+event.infoWindowHtml);
openInfoWindow(event.row["Sample Location"].value, event.latLng);
// infoWindow.setContent(event.infoWindowHtml);
// infoWindow.setPosition(event.latLng);
// infoWindow.open(map);
document.getElementById('BottomInfoWindow').innerHTML = event.infoWindowHtml;
});
infoWindow = new google.maps.InfoWindow();
// createSidebar();
}
</script>
</head>
<body onload="initialize()">
<table style="width:100%;"><tr><td>
<div id="map_canvas">
</div>
</td><td>
<div id="sidebar" style="width:120px;height:550px; overflow:auto" class="auto-style1">
</div>
</td></tr>
<tr><td colspan="2">
<div id="BottomInfoWindow" class="auto-style1">
Result
</div>
</td></tr>
</table>
I get a javascript error Uncaught TypeError: Cannot read property 'infoWindowHtml' of undefined in the posted code on this line:
document.getElementById('BottomInfoWindow').innerHTML = event.infoWindowHtml;
There is no event inside the getData function
If you want to use the code that exists, add that to openInfoWindow()
function openInfoWindow(name, position) {
// Set up and create the infowindow
if (!infoWindow) infoWindow = new google.maps.InfoWindow({});
infoWindow.setOptions({
content: '<div class="FT_infowindow"><h3>' + name +
'</h3></div>',
pixelOffset: new google.maps.Size(0, 2),
position: position
});
// Infowindow-opening event handler
infoWindow.open(map);
document.getElementById('BottomInfoWindow').innerHTML = infoWindow.getContent();
}
proof of concept fiddle
Note that the infoWindowHtml defined by the fusionTable (what your click listener is displaying in the "BottomInfoWindow" DIV) is not accessible from the sidebar, but you can recreate it in the openInfoWindow function.
To make them both the same (formated by the openInfoWindow function) change the fusionTablesLayer "click" handler as well:
google.maps.event.addListener(layer, "click", function (event) {
infoWindow.close();
// alert("click:"+event.latLng+","+event.infoWindowHtml);
openInfoWindow(event.row["Sample Location"].value, event.latLng);
// infoWindow.setContent(event.infoWindowHtml);
// infoWindow.setPosition(event.latLng);
// infoWindow.open(map);
document.getElementById('BottomInfoWindow').innerHTML = infoWindow.getContent();
});
I am displaying marker for every near by account and below anchor tag should navigate to the respective account upon clicking it.I have used the code in Workbook,but it works neither in Desktop nor in Salesforce1.I have checked posts where users reported that redirection is happening to wrong page.But in my case page just refreshes and stays on the same page.Please help
try{
if(sforce.one){
accountNavUrl = 'javascript:sforce.one.navigateToSObject(\'' + account.Id + '\')';
}
} catch(err) {
console.log(err);
var dId=account.Id;
accountNavUrl= '\\' + account.Id;
}
console.log('-->'+accountNavUrl );
var content='<a href src="'+accountNavUrl +'" >'+account.Name+ '</a><br/>'+account.BillingStreet +'<br/>' + account.BillingCity +'<br/>' + account.BillingCountry;
Below is my whole code
<apex:page standardController="Account" extensions="AccountMapExt" sidebar="false" showHeader="false">
<!-- Begin Default Content REMOVE THIS -->
<apex:includeScript value="https://maps.googleapis.com/maps/api/js?sensor=false" />
<style>
html, body { height: 100%; }
.page-map, .ui-content, #map-canvas { width: 100%; height:100%; padding: 0; }
#map-canvas { height: min-height: 100%; }
</style>
<script>
var lat;
var lon;
function initialize(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
function(position){
lat=position.coords.latitude;
lon=position.coords.longitude;
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.AccountMapExt.getNearby}',lat, lon,
function(result, event){
if (event.status) {
console.log('->'+lat+' '+lon+' '+result);
createMap(lat, lon, result);
} else if (event.type ==='exception') {
//exception case code
} else {
}
},
{escape: true}
);
}
);
}
}
function createMap(lat,lon,accounts){
console.log('Calling map '+ lat+' '+lon);
var currentPosition = new google.maps.LatLng(lat,lon);
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: currentPosition,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var positionMarker = new google.maps.Marker({
map: map,
position: currentPosition,
icon: 'https://maps.google.com/mapfiles/ms/micons/green.png'
});
for(var i=0; i<accounts.length;i++){
account= accounts[i];
console.log(accounts[i]);
setupMarker();
}
function setupMarker(){
var accountNavUrl;
try{
if(sforce.one){
accountNavUrl = 'javascript:sforce.one.navigateToSObject(\'' + account.Id + '\')';
}
} catch(err) {
console.log(err);
var dId=account.Id;
accountNavUrl= '\\' + account.Id;
}
console.log('-->'+accountNavUrl );
var content='<a href src="'+accountNavUrl +'" >'+account.Name+ '</a><br/>'+account.BillingStreet +'<br/>' + account.BillingCity +'<br/>' + account.BillingCountry;
//Create the callout that will pop up on the marker
var infowindow = new google.maps.InfoWindow({content: content});
//Place the marker
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(account.BillingLatitude,account.BillingLongitude)}
);
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map, marker);
});
}
var mapBoundary = new google.maps.LatLngBounds();
mapBoundary.extend(currentPosition);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body style="font-family: Arial; border: 0 none;">
<div id="map-canvas"></div>
</body>
<!-- End Default Content REMOVE THIS -->
</apex:page>
Below code did the trick!
var accountNavUrl;
try{
if(sforce.one){
accountNavUrl='<a href="javascript:sforce.one.navigateToSObject(\''+account.Id+'\');">';
}
} catch(err) {
console.log(err);
accountNavUrl='<a href="../' + account.Id + '" target="_parent">';
}
console.log('-->'+accountNavUrl );
var content=accountNavUrl+account.Name+ '</a><br/>'+account.BillingStreet +'<br/>' + account.BillingCity +'<br/>' + account.BillingCountry;
im currenty undataking a project which includes a google map API!im loading markers on the map using mysql from my database. now what am trying to accomplish is something like this i have seen before http://www.tanesco.co.tz/index.php?option=com_wrapper&view=wrapper&Itemid=155
I want to create a link on the displayed table which when clicked it opens up an info window on the map....I completely have no idea where to start
This is my map code
<?php include("connect.php");
?>
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" type="text/css" rel="stylesheet" media="screen" />
<title>AzamTv Customer Database</title>
<style type="text/css">
<!--
.style2 {color: #999999}
.style3 {color: #666666}
.style4 {color: #FF0000}
.style5 {color: #3366FF}
-->
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script language="javascript" type="text/javascript">
function downloadUrl(url,callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
//Get element by ID where the function return tand get the latitude and longitude
//do not embed any thing before authorized permition to google.
function load() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
center: new google.maps.LatLng( -6.801859, 39.282503),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("mapxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var licence_number = markers[i].getAttribute("Licence_number");
var phone = markers[i].getAttribute("phone");
var business_image = markers[i].getAttribute("business_image");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
//Creating image
var image_src= "<div><img width='100' height='100' src=' "+ business_image +"' /></div>";
var html = "<b>" +"<h4>Business Name:</h4>"+ name + "</b> <br/><br/>"+"<h4>Address:</h4>" + address + "</b> <br/><br/>"+"<h4>Licence Type:</h4>" + licence_number + "</b> <br/><br/>" + "<h4>Phone:</h4>" + phone + "</b> <br/><br/>"+"<h4>Image:</h4>" + image_src + "</br> Zoom out Zoom in" ;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
//If u wanna change the markers by adding custom ones of ur own add here
var customIcons = {
TIN: {
icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'
},
VAT: {
icon: 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png'
}
};
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
// Pan map center to marker position
map.panTo(marker.getPosition());
var c= map.getZoom()+3;
var maxZoom=map.mapTypes[map.getMapTypeId()].maxZoom;
if(c<=maxZoom){
map.setZoom(c+3);
}
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function doNothing() {}
function zoomout() {
var d = map.getZoom();
if(d>0){
map.setZoom(d-1);
}
// e = map.getCenter();
// map.setZoom(d - 1);
// map.setCenter(e.Longitude, e.Latitude);
// should be: map.setCenter(e.lat(), e.lng());
}
function zoomin() {
var x = map.getZoom();
var maxZoom=map.mapTypes[map.getMapTypeId()].maxZoom;
if(x<maxZoom){
map.setZoom(x+1);
}
// y = map.getCenter();
// map.setZoom(x + 1);
// map.setCenter(y.Longitude, y.Latitude);
// should be: map.setCenter(y.lat(), y.lng());
}
</script>
<script language="javascript" type="text/javascript">
//Script For The Search
function cleartxt()
{
formsearch.searched1.value="";
}
function settxt()
{
if(formsearch.searched1.value=="")
{
formsearch.searched1.value="Search Customer";
}
}
</script>
</head>
<body onLoad="load()">
<div id="map" style="width: 100%; height: 80%"></div>
</body>
</html>
Thank you all in advance
You create markers like
var marker = new google.maps.Marker({
position: myLatlng,
title:"Your title"
});
create links which on click trigger
infowindow.open(map,marker);
thats all i guess.
EDIT: You could identify which marker needs to be shown by href-parameter