There is a add Maker function in the Source Code.
How can I access it?
Also how do I change the icon and add infoBox to the marker?
this.addMarker = function (lat, lng, icon, infoWindowContent, label, url, thumbnail)
Javascript is a flexible language. You can wirte your code as :
var marker = new google.maps.Marker({ position: latLng, clickable: true, icon: markerJSON[i].icon, myExtraEntity1: markerJSON[i].oldLatLng, myExtraEntity2: markerJSON[i].headshipID});
marker.myExtraEntity3 = markerJSON[i].id;
marker.map=mymap;
var content= "Tool: " + markerJSON[i].toolName+ " <br><br>Gang: " + markerJSON[i].gangName + "<br><br>Gang Cheff: " +
markerJSON[i].cheff+ "<br><br><a href='javascript:drawPath(" + marker.id + ")'>[1 Day Path]</a><a href='javascript:cleanPath(" + marker.id + ")'>[Clean Path]</a>"
var boxText = document.createElement("div");
boxText.className = "infoBox";
boxText.innerHTML = content;
marker.info = new google.maps.InfoWindow({
content: boxText
});
addInfoWindow(marker, marker.info.content);
markers.push(marker);
Related
i have my code as follows, i am not using any external libraries inside my react app
import React, { Component } from "react";
import MarkerInfo from "./MarkerInfo";
import { render } from "react-dom";
class Map extends Component {
componentDidMount() {
this.renderMap();
}
renderMarkerInfo = () => {
return (
<div id="markerinfo">
<h1>THis is info marker</h1>
</div>
);
};
renderMap = () => {
loadScript(
"https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap"
);
window.initMap = this.initMap;
};
initMap = () => {
var uluru = { lat: -25.363, lng: 131.044 };
var map = new window.google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru
});
var contentString =
'<div id="content">' +
'<div id="siteNotice">' +
"</div>" +
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
'<div id="bodyContent">' +
"<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
"sandstone rock formation in the southern part of the " +
"Northern Territory, central Australia. It lies 335 km (208 mi) " +
"south west of the nearest large town, Alice Springs; 450 km " +
"(280 mi) by road. Kata Tjuta and Uluru are the two major " +
"features of the Uluru - Kata Tjuta National Park. Uluru is " +
"sacred to the Pitjantjatjara and Yankunytjatjara, the " +
"Aboriginal people of the area. It has many springs, waterholes, " +
"rock caves and ancient paintings. Uluru is listed as a World " +
"Heritage Site.</p>" +
'<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
"https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
"(last visited June 22, 2009).</p>" +
"</div>" +
"</div>";
var infowindow = new window.google.maps.InfoWindow({
content: contentString
});
var marker = new window.google.maps.Marker({
position: uluru,
map: map,
title: "Uluru (Ayers Rock)"
});
marker.addListener("click", function() {
infowindow.open(map, marker);
});
};
render() {
return (
<div id="map">
<MarkerInfo />
</div>
);
}
}
function loadScript(url) {
var index = window.document.getElementsByTagName("script")[0];
var script = window.document.createElement("script");
script.src = url;
script.async = true;
script.defer = true;
index.parentElement.insertBefore(script, index);
}
export default Map;
current I am showing the info window with the hardcoded text, I want to show it using a react component, how can I be able to do that?
i wrote another component, whenever the marker i want to show the react component dynamically
Thanks in Advance
One option to consider would be:
1) to create an instance of InfoWindow without setting content property at this stage:
const infowindow = new window.google.maps.InfoWindow({
content: ""
});
2) and set or update content dynamically via InfoWindow.setContent function once a marker is clicked:
marker.addListener("click", () => {
const content = ReactDOMServer.renderToString(InfoWindowContent);
infowindow.setContent(content);
infowindow.open(map, marker);
});
where InfoWindowContent is represented as a React element and ReactDOMServer.renderToString function is used to render it into HTML
string since InfoWindow.setContent accepts content value as a string:
const InfoWindowContent = (
<div id="bodyContent">
<p>
<b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large sandstone
rock formation in the southern part of the Northern Territory, central
Australia. It lies 335 km (208 mi) south west of the nearest
large town, Alice Springs; 450 km (280 mi) by road. Kata Tjuta
and Uluru are the two major features of the Uluru - Kata Tjuta National
Park. Uluru is sacred to the Pitjantjatjara and Yankunytjatjara, the
Aboriginal people of the area. It has many springs, waterholes, rock caves
and ancient paintings. Uluru is listed as a World Heritage Site.
</p>
<p>
Attribution: Uluru,
<a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">
https://en.wikipedia.org/w/index.php?title=Uluru
</a>
(last visited June 22, 2009).
</p>
</div>
);
Here is a demo
In my app using google place map predefined location but i need location name lat and lng from google map dynamically when moves the marker on google
Im using angularJs 1.5
my code like this
$scope.Markers =
{
"lat": '12.976154',
"lng": '77.445760',
}
//Setting the Map options.
$scope.MapOptions = {
center: new google.maps.LatLng($scope.Markers.lat, $scope.Markers.lng),
zoom: 7,
rotation: 45,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Initializing the InfoWindow, Map and LatLngBounds objects.
$scope.InfoWindow = new google.maps.InfoWindow();
$scope.Latlngbounds = new google.maps.LatLngBounds();
$scope.Map = new google.maps.Map(document.getElementById("dvMap"), $scope.MapOptions);
//Looping through the Array and adding Markers.
// for (var i = 0; i < $scope.Markers.length; i++) {
// var data = $scope.Markers[i];
var myLatlng = new google.maps.LatLng($scope.Markers.lat, $scope.Markers.lng);
//Initializing the Marker object.
var marker = new google.maps.Marker({
position: myLatlng,
map: $scope.Map,
title: $scope.Markers.title
});
//Adding InfoWindow to the Marker.
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
// $scope.InfoWindow.setContent("<div style = 'width:100px;min-height:40px'>" + data.description + "</div>");
// $scope.InfoWindow.open($scope.Map, marker);
});
})(marker, $scope.Markers);
//Plotting the Marker on the Map.
$scope.Latlngbounds.extend(marker.position);
// }
//Adjusting the Map for best display.
$scope.Map.setCenter($scope.Latlngbounds.getCenter());
$scope.Map.fitBounds ($scope.Latlngbounds);
Please help me
You can attach the drag & dragend events to the google maps markers using 'google.maps.event.addListener' method.
function getMarkerCoords(markerobj){
google.maps.event.addListener(markerobj, 'dragend', function(evt){
infoWindow.setOptions({
content: '<p>Marker Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>'
});
infoWindow.open(map, markerobj);
});
google.maps.event.addListener(markerobj, 'drag', function(evt){
console.log("marker is being dragged");
});
}
I want to put a checkbox in the label of a Dojo TabContainer. I found an example here:
http://telliott.net/dojoExamples/dojo-checkboxTabExample.html
However, the example only shows html. I would like to do this programmatically. This is what I have so far:
function(response){
var json_response = JSON.parse(response);
var fields_dict = json_response['fields_dict'];
var names_dict = json_response['names_dict'];
var tc = new TabContainer({
style: "height: 495px; width: 100%;",
tabPosition: "left",
tabStrip: true
}, "report_tab_container");
for(var key in fields_dict) {
var content_string = '';
var fields = fields_dict[key];
for(var field in fields) content_string += '<div>' + fields[field][0] + fields[field][1] + '</div>';
var checkBox = new CheckBox({
name: "checkBox",
value: "agreed",
checked: false,
onChange: function(b){ alert('onChange called with parameter = ' + b + ', and widget value = ' + this.get('value') ); }
}).startup();
var tcp = new ContentPane({
//title: names_dict[key],
title: checkBox,
content: content_string
});
tc.addChild(tcp);
}
tc.startup();
tc.resize();
},
However, this doesn't work. When I load my page, the TabContainer doesn't show up. If I set the title of my ContentPane to something other than my check box, it works fine.
What am I doing wrong and how do I get the checkbox to appear in the TabContainer title?
This is what worked:
cb.placeAt('report_tab_container_tablist_dijit_layout_ContentPane_'+ i.toString(), "first");
I'm doing this blindly here, but comparing the example on your link to your code, I would say, add this before tc.addChild(tcp) :
checkBox.placeAt(tcp.domNode, "first");
I use PHP mysql for my google map.
Two different marker will be show (green for ja (yes), orange for nein (no)). But when two "things" have same lat and long only one of them will be shown (for example: a man (ja) and a women (nein) lives in same house)
How can I get two markers? I don´t want both in same infowindow and no cluster.
First the php:
$query = "SELECT ...";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-Type: text/xml; charset=utf-8");
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = #mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
parseToXML($row['kennelname'] .'</a>" ';
echo '<marker ';
if ($row['studlist'] == 'ja')
{echo 'studlist=" " ';} else {echo 'studlist="Daten nicht geprüft!" ';}
echo 'name="' . parseToXML($row['dogname']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'type="' . $row['studlist'] . '" ';
echo ' />';
}
// End XML file
echo '</markers>';
and the js:
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
ja: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
nein: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_orange.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(51.162014, 10.450573),
zoom: 6,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("testfemale_de_xml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute("id");
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var studlist = markers[i].getAttribute("studlist");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html =
"<a href='/dog.php?id=" + id + "'>" + name + "</a>" +
"<br/><img src='/photo/" + id + "/" + id + ".jpg' height='70' width='' alt=''>" +
"<br />" +studlist
;
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);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
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);
}
function doNothing() {}
//]]>
</script>
When to markers share the same location you will see only one. You can select which one to show using the zIndex property of the marker. For example:
marker.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
I am attempting to pull data from the local database and display it in a tableview that uses a custom row. I do not know how to get it to display properly. the way it is currently written will display one row with the data correctly displayed in it, but it appears to be showing thousands of empty rows. I think my problem is because I have two while (rows.isValidRow()) statements. Would someone please show me the code to make this display correctly? Here is my current code:
//Setup the window
var win = Titanium.UI.currentWindow;
win.barColor='#000000';
//install database
var db = Ti.Database.install('bcapool3.sqlite','distributor');
//Get data
var rows = db.execute('SELECT * FROM distributor');
// create table view
var tableview = Ti.UI.createTableView({
backgroundColor:'transparent',
color: '#000000',
top:80,
height:'auto',
left:80,
right:80,
bottom:120
});
function setData() {
while (rows.isValidRow())
{
var dataArray = [];
var row = Ti.UI.createTableViewRow({
haschild: true,
path: 'distributordetail.js'
});
var title = Ti.UI.createLabel({
color:'#000000',
height:32,
left:5,
top:2,
font:{fontSize:'18dp',fontWeight:'bold' },
backgroundColor:'transparent',
text:'' + rows.fieldByName('distributor_name') + ''
});
var address = Ti.UI.createLabel({
color:'#000000',
height:32,
left:5,
top:34,
fontSize:'14dp',
backgroundColor:'transparent',
text:'' + rows.fieldByName('distributor_address') + ''
});
var distance = Ti.UI.createLabel({
color:'#000000',
height:32,
right: 10,
top:34,
fontSize:'12dp',
backgroundColor:'transparent',
text:'' + rows.fieldByName('distance') + ''
});
row.add(title);
row.add(address);
row.add(distance);
tableview.add(row);
row.className = 'distributorRow';
dataArray.push(row);
rows.next();
}
// set the array to the tableView
tableview.setData(dataArray);
}
}
You are right, 2 while loops are making problem.
Also you need to add rows to dataArray : dataArray.push(row);
And then outside of while loop, set dataArray as data to tableView: tableview.setData(dataArray);
I just modified some of your code and it is working fine:
//Setup the window
var win = Titanium.UI.createWindow({
backgroundColor: '#123456',
});
//install database
var db = Ti.Database.open('distributor');
try{
db.execute('create table if not exists distributor(id varchar(10), distributor_name varchar(10), distributor_address varchar(10), distance varchar(10));');
db.execute("Insert into distributor values('id1','name1','address1','distance1')");
db.execute("Insert into distributor values('id2','name2','address2','distance2')");
db.execute("Insert into distributor values('id3','name3','address3','distance3')");
db.execute("Insert into distributor values('id4','name4','address4','distance4')");
db.execute("Insert into distributor values('id5','name5','address5','distance5')");
}
catch(err)
{
Ti.API.info(err.message);
}
// create table view
var tableview = Ti.UI.createTableView({
backgroundColor:'transparent',
color: '#000000',
top:80,
height:'auto',
left:80,
right:80,
bottom:120
});
setData();
win.add(tableview);
win.open();
function setData() {
//db.open();
var rows = db.execute('SELECT * FROM distributor');
//db.close();
var dataArray = [];
while (rows.isValidRow())
{
var row = Ti.UI.createTableViewRow({
haschild: true,
});
var title = Ti.UI.createLabel({
color:'#000000',
height:32,
left:5,
top:2,
font:{fontSize:'18dp',fontWeight:'bold' },
backgroundColor:'transparent',
text:'' + rows.fieldByName('distributor_name') + ''
});
var address = Ti.UI.createLabel({
color:'#000000',
height:32,
left:5,
top:34,
fontSize:'14dp',
backgroundColor:'transparent',
text:'' + rows.fieldByName('distributor_address') + ''
});
var distance = Ti.UI.createLabel({
color:'#000000',
height:32,
right: 10,
top:34,
fontSize:'12dp',
backgroundColor:'transparent',
text:'' + rows.fieldByName('distance') + ''
});
row.add(title);
row.add(address);
row.add(distance);
dataArray.push(row);
rows.next();
}
tableview.setData(dataArray);
}