Adding data from my database to infowindow in Google API V3 - api

i have a probleme to my infowindow, i can't show my title and description on it.
The relation between my data base and google api is good because i can show my marker on the map but when i click on it there is nothing in the infowindow.
Here's my code:
function createMarker(lat, lng, titre, description, adresse){var latlng = new google.maps.LatLng(lat, lng);var marker = new google.maps.Marker({position: latlng,map: map,title: titre});
contentString =
'<div class="descritpion" >'+'<a>(titre)</a>'+''
'</div>';
var infobulle = new google.maps.InfoWindow({content: contentString,});google.maps.event.addListener(marker, 'click', function(){infobulle.open(map, marker);});}

This is sort of how I do it (though I usually also hold all the markers in an array so they can be cleared, or updated as a group). Also, I'm assuming your syntax around titre was wrong, and have corrected to to be what I thought you wanted to achieve.
var MyInfoWindow = new google.maps.InfoWindow({content: 'Loading...'});
function createMarker(lat, lng, titre, description, adresse){
var point=new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({position: point,map: map});
marker.html='<div class="descritpion" ><a>('+titre+')</a></div>';
google.maps.event.addListener(marker, 'click', function () {
MyInfoWindow.setContent(this.html);
MyInfoWindow.open(map, this);
});
}

Related

How to limit search results to an extent with Esri Javascript map?

I believe by default the 4.13 Esri Javascript map will search addresses by the current map view extent. The issue is that if the user zooms in or out too far, the search results return addresses VERY far away. Here is my code:
function initESRIMap() {
require(["esri/Map", "esri/views/MapView", "esri/widgets/Search", "esri/layers/FeatureLayer", "esri/widgets/Popup", "esri/geometry/Extent", "esri/geometry/Geometry"], function (
Map,
MapView,
Search,
FeatureLayer,
Popup,
Extent,
Geometry
) {
var esriMap = new Map({
basemap: "streets",
});
var esriView = new MapView({
container: "map-div",
map: esriMap,
center: LatLong,
zoom: 11,
});
var search = new Search({
view: esriView,
});}
I want to be able to get the same search results REGARDLESS of my map view location. BUT limit results to a specific area. Therefore if I'm viewing another country I'll still see search results from my extent.
A search widget can be customized to use custom sources, and a custom source can be customized to use a filter, which can include a map extent.
For example, let's define a custom SearchSource - we'll just use the same search endpoint as the standard ArcGIS World Geocoder service, but we'll add a filter:
const source = {
locator: new Locator({
url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
}),
filter: {
geometry: new Extent({
xmax: -12921954.804910611,
xmin: -13126806.04071496,
ymax: 3909898.0736186495,
ymin: 3801204.619397087,
spatialReference: {
wkid: 102100
}
})
},
maxSuggestions: 10
};
Now when we're defining our search widget, we'll include this in the source property array, and we'll turn off includeDefaultSources so that the original, unbounded source, is not used:
const search = new Search({
view,
includeDefaultSources: false,
sources: [source]
});
Working Codesandbox
In this example, I set the extent in the filter to be around the area of san diego / tijuana. Wherever you pan or zoom on the map, you'll still only get results from that area. For example, move the map over to seattle, or china, or whatever, and search for something generic ("park", "road", whatever), and you'll see that no matter what the map's extent is, the search results will be limited to what you put in the search source's filter.
Note this answer was written with 4.18.

symfony 3.3 saving latitude and longutude google maps API

I'm using google maps API and I need to save the position of each user after they select it by dragging the marker, knowing that they will be changing it from their profile and not an update page.
So basically I need to save the lat and lng of the user in the table right after they move marker, I haven't found a proper solution since we usually have regular forms with submit buttons to update. So here's the google maps div from the twig
<div id="map-canvas" style="width: 500px; height: 380px"></div>
<script src="https://maps.googleapis.com/maps/api/js?key="
type="text/javascript"></script>
<script>
var map = new google.maps.Map(document.getElementById('map-canvas'),{
center:{
lat: 45,
lng: 45
},
zoom:15
});
var marker = new google.maps.Marker({
position:{
lat: 45,
lng: 45
},
map: map,
draggable: true
});
google.maps.event.addListener(marker,'dragend',function () {
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
$('#lat').val(lat);
$('#lng').val(lng);
})
</script>
and here's the controller for the profil page
public function showEtabbAction(){
$em = $this->getDoctrine()->getManager();
$etab = $this->getUser()->getEtablissement();
$userNom = $this->getUser()->getNom();
return $this->render('#AllforkidsUser/Etablissement/etab.html.twig',array("etablissement"=>$etab,"nom"=>$userNom));
}
and thanks
Put two hidden fields in your form and then on dragend map event, set the value of this hidden fields from the marker position. Then you can handle the request as a regular form.

ESRI javascript featureLayer.graphics

I'm working on a map that uses FeatureLayer.Mode_ONDEMAND. To see certain layer, I pass in a project ID using featureLayer.setDefinitionExpression. Where such layer exists, I see it. What I want to know is how to detect when no layer exists. I want to print an alert to the viewer instead of showing just a blank map. Here's my code:
function init() {
map = new esri.Map("mapDiv", {
basemap: "topo",
zoom: 9
});
var featureLayer = new esri.layers.FeatureLayer("http://services.arcgis.com/v01g34asdwfAi/arcgis/rest/services/Projects/FeatureServer/0",{
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
opacity: 1
});
featureLayer.setDefinitionExpression("SrvyDescID=\'' . htmlspecialchars($ProjectID) . '\'");
console.log(featureLayer.graphics);
console.log(featureLayer.graphics[0]);
map.addLayer(featureLayer);
}
What I learned is when the project is valid, feature.graphics will return an array. But I'm unable to treat it like an array. For example:
console.log(featureLayer.graphics) returns an array object
but
console.log(featureLayer.graphics[0]) returns "undefined".
featureLayer.graphic.length also doesn't work. How do I use this array object to let me know that a layer is displayed on the map?
Attached is a screenshot of the console log. Thanks for your help.
I needed to catch "update-end" event. Final code:
map = new esri.Map("mapDiv", {
center: [-118.30, 34.3],
zoom: 8,
basemap: "topo"
});
on(map, "update-end", function(){ // update-end event will execute after the layer has been added to the map
if(featureLayer.graphics.length >= 1)
{
// do your thing
}
})
var featureLayer = new
esri.layers.FeatureLayer("http://services.arcgis.com/v01gqwMseaqNAi/arcgis/rest/services/Project_boundaries_021616/FeatureServer/0",{
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
opacity: 1
});
featureLayer.setDefinitionExpression("SrvyDescID=\'' . htmlspecialchars($SDID) . '\'");
map.addLayer(featureLayer);

Google map ignoring marker size for retina icons

I have a Google map driven by Advanced Custom Fields. I have created an iconType to dictate which icon is used as the marker depending on the custom field.
My marker images are 80px square but I want to force them to 40px square for retina reasons. I have tried lots of variations of code I've found via google etc but nothing works and the size gets ignored showing my markers at the larger 80px. My guess is because I have the 2 icons depending on iconType?
Can anyone help me force the size of these markers to 40px square please...
function add_marker( $marker, map ) {
// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng'));
var iconType = $marker.attr('data-icon');
var iconBase = '<?php echo get_template_directory_uri(); ?>/assets/';
var size = new google.maps.Size(40, 40);
if (iconType === 'Costa') {
iconName = 'costa#2x.png';
} else {
iconName = 'starbucks#2x.png';
}
// create marker
var marker = new google.maps.Marker({
position : latlng,
map : map,
clickable: false,
animation: google.maps.Animation.DROP,
icon: iconBase + iconName,
});
// add to array
map.markers.push( marker );
// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
}
}
I did something like this recently, and I believe you'll need to use the new Icon object to specify your custom Icon properties, and use the size and scaledSize properties. I fixed my issues following this guide:
How to add retina ready pin marker to your Google maps?

Unable to display button in tableViewRow in titanium

i am new to titanium development.i am developing ToDo application using Titanium for learning purpose.i able to display the data from database and generate tableViewRow successfully but i am stuck in one phase that i unable to display button in each row.i did R&D for it but i cant get solution.here is my code for display buttons in each row of tableViewRow it display all records from database in each row but not buttons.it shows [object TableViewRow] in each row instead of button. so please help me to solve the issue
![Titanium.UI.setBackgroundColor('black');
var win = Titanium.UI.createWindow
({
title:'Tab 1',
backgroundColor:'#fff'
});
var db = Titanium.Database.install('/mydata/ToDoDB', 'ToDoDB');
var rows = db.execute('SELECT * FROM task');
var data1=[];
while(rows.isValidRow())
{
var rowview=Titanium.UI.createTableViewRow();
var btn=Titanium.UI.createButton
({
right:'20dp',
width:'60dp',
height:'40dp',
title:'Show'
});
rowview.add(btn);
var tt=rows.fieldByName('title');
var cc=rows.fieldByName('content');
//data1.push({title:rows.fieldByName('title')},{title:rows.fieldByName('content')},{title:rowview});
data1.push({title:tt+cc+rowview});
rows.next();
//rowview.add(btn);
};
rows.close();
var yourTable = Ti.UI.createTableView
({
width : Ti.UI.FILL,
height : Ti.UI.FILL,
data: data1
});
db.close();
win.add(yourTable);
win.open();
Try the following
var rowview = Titanium.UI.createTableViewRow();
var tt=rows.fieldByName('title');
var cc=rows.fieldByName('content');
var btn=Titanium.UI.createButton({
right:'20dp',
width:'60dp',
height:'40dp',
title:'Show'
});
var labeltt=Titanium.UI.createLabel({
left:'20dp',
width:'60dp',
height:'40dp',
text:tt
});
var labelcc=Titanium.UI.createLabel({
left:'80dp',
width:'60dp',
height:'40dp',
text:cc
});
rowview.add(labeltt);
rowview.add(labelcc);
rowview.add(btn);
data1.push(rowview);
I didn't tried this code, so there should be some alignment issues. I hope this will help you
what you are looking for is a custom row once you start including buttons and such.
Here is a old but still informative example
http://cssgallery.info/custom-row-for-tableview-in-appcelerator-titanium/
Basic idea is that you create a view, place it in the row, and then add the additional row UI object into that view