I get the Coordinates and the Names and "ID" out of an MySQL Table but why is in every Marker the same Text an also the same link ?
Why is the text not different ???
It show only the last ID but it should add after every element in the data base an other marker !
The markers are at the right Position and the "Content" is in the Source Code also right but not at the markes why ?!
Please Help
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.124213, 10.60936),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var contentString;
var elementeInArray = 0;
var LatLngList = new Array;
<? php
$i = 1;
foreach($FertigID as $ID) {
$result = mysql_query("SELECT * FROM Daten_CH WHERE Objektnummer = ".$ID.
"");
while ($Ergebnisse = mysql_fetch_array($result)) {
// Werden alle ergebnisse (ID´s) in einen Array geschriebenn
echo $$Ergebnisse["Objektnummer"];
if (isset($Ergebnisse["Gis_y"]) && $Ergebnisse["Gis_y"] != "" &&
$Ergebnisse["Gis_y"] != " ") {
echo $i; ?>
// MARKER TEXT
contentString = '<?php echo $i; ?> </br><?php echo
$Ergebnisse["Objektname"]; ?>
</br><a href="Change.php?ID=<?php echo $ID; ?>">
<input type="button" value="BEARBEITEN"></button></a>';
var Position = new google.maps.LatLng( <? php echo $Ergebnisse["Gis_y"]; ?> , <? php echo $Ergebnisse["Gis_x"]; ?> );
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker <? php echo $i; ?> = new google.maps.Marker({
position: Position,
map: map,
title: '<?php echo $Ergebnisse["AA_Objektname"]; ?>'
});
google.maps.event.addListener(marker <? php echo $i; ?> , 'click', function () {
infowindow.open(map, marker <? php echo $i; ?> );
});
LatLngList[elementeInArray] = new google.maps.LatLng( <? php echo $Ergebnisse["Gis_y"]; ?> , <? php echo $Ergebnisse["Gis_x"]; ?> );
elementeInArray++;
<? php
}
}
$i++;
}
?>
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
// And increase the bounds to take this point
bounds.extend(LatLngList[i]);
}
// Fit these bounds to the map
map.fitBounds(bounds);
var opt = {
minZoom: 1,
maxZoom: 12
};
map.setOptions(opt);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Because you should assign the contentString to the marker, and update the infowindow with each markers assigned content instead. As it is now, the only contentString available is the last created. Furthermore, you really dont have to create multiple numbered markers. You just need one marker reference only.
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: Position,
map: map,
content: contenString, // <-- assign content to the marker itself
title: '<?php echo $Ergebnisse["AA_Objektname"]; ?>'
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(this.content);
infowindow.open(map, this);
});
This would do the trick.
Related
I have created a map to pin point the exact location for the customer's provided address. I am getting lat long for the address but it is not pointing out with a map marker on the map I do not know why it is not pointing out can anyone help me out pleasen here is my code
<?php
$addresse = $_POST['address'];
$prepAddr = str_replace(' ','+',$addresse);
$geocode = file_get_contents('https://maps.google.com/maps/api/geocode/json?address='.$prepAddr.'&sensor=false');
$output = json_decode($geocode);
$latitude = $output->results[0]->geometry->location->lat;
$longitude = $output->results[0]->geometry->location->lng;
?>
<div id="map" style="width:400px;height:400px;"></div>
<script>
function unick() {
var mapOptions = {
center: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
zoom: 10,
mapTypeId: google.maps.MapTypeId.satellite
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
You have to add a marker to the map, like this:
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var latLng = new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>);
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: 'You are here'
label: 'You are here'
});
Edit: added title and label properties. For more information, see the Google Maps API Reference
i have PHP code with MYSQL database and javascript where i ma using the java script in order to display the Google Map with markers where the code display markers based on their coordination.
i have some markers that have the same coordination but different ID so the map show just the last marker.
what i need is:
either to display all the markers that have the same coordination
or
display one marker with number that indicate the the total number of
the markers that have the same coordination.
code:
<script type="text/javascript">
var map,currentPopup;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(33.888630, 35.495480),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
//icon: icons[feature.type].icon,
map: map
});
var markerCluster = new MarkerClusterer(map, marker,
{imagePath:
'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
var popup = new google.maps.InfoWindow({
content: '<b>Site ID :</b> ' + feature.info +'<br></br>'
+ '<b> Site Name :</b>' + feature.site_name +'<br></br>'
+ '<b>Coordinates :</b> '+ feature.position +'<br></br>'
+ '<b>height :</b> ' + feature.height,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
var features = [
<?php
$prependStr ="";
foreach( $wpdb->get_results("select c.siteID, c.latitude, c.longitude, c.height
, i.siteNAME
FROM site_coordinates2 c LEFT
JOIN site_info i
on c.siteID = i.siteID
where i.siteNAME = '".$site_name."'", OBJECT) as $key => $row) {
$latitude = $row->latitude;
$longitude = $row->longitude;
$siteid = $row->siteID;
$height = $row->height;
$siteName = $row->siteNAME;
echo $prependStr;
?>
{
position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
info:'<?php echo $siteid;?>',
height: '<?php echo $height;?>',
site_name: '<?php echo $siteName;?>',
}
<?php
$prependStr =",";
}
?>
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
</script>
<?php
//echo "</table>";
}
?>
and i add this library to the code
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
I have problem with my Google Maps API v3 script. I am using CodeIgniter framework.
The problem is when I clicked a marker, and then click another marker, InfoWindow Google Maps on previous marker didn't close. This is my code:
<script type="text/javascript">
var peta;
var gambar_kantor = new Array();
var nama = new Array();
var kategori = new Array();
var alamat = new Array();
var telpon = new Array();
var x = new Array();
var y = new Array();
var i;
var url;
var gambar_marker;
var gambar_kantor;
var baseurl = "<?php echo base_url() ?>";
function map_init() {
var map = new google.maps.LatLng(-6.990411, 110.422542);
var myStyles =[
{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
var petaoption = {
zoom: 12,
center: map,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: myStyles
};
peta = new google.maps.Map(document.getElementById("map_canvas"),petaoption);
getdatabase();
}
function getdatabase(){
var markers = [];
var info= [];
<?php
$query = $this->db->query("SELECT l.id, l.nama, l.gambar, l.alamat, l.telp, l.latittude, l.longitude, k.nama_kategori, k.ikon
FROM lokasi as l, kategori as k
WHERE l.kategori=k.id");
$i = 0;
$js = "";
foreach ($query->result() as $value) {
$js .= 'nama['.$i.'] = "'.$value->nama.'";
alamat['.$i.'] = "'.$value->alamat.'";
telpon['.$i.'] = "'.$value->telp.'";
x['.$i.'] = "'.$value->latittude.'";
y['.$i.'] = "'.$value->longitude.'";
set_icon("'.$value->ikon.'");
var point = new google.maps.LatLng(parseFloat(x['.$i.']),parseFloat(y['.$i.']));
var contentString = "<table>"+
"<tr>"+
"<td align=center><br><b>" + nama['.$i.'] + "</b></td>"+
"</tr>"+
"<tr>"+
"<td align=center width=300px>" + alamat['.$i.'] + "</td>"+
"</tr>"+
"<tr>"+
"<td align=center> Telp: " + telpon['.$i.'] + "</td>"+
"</tr>"+
"</table>";
var currentInfoWindow = null;
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: point,
map: peta,
icon: gambar_marker,
clickable: true
});
markers.push(marker);
info.push(infowindow);
google.maps.event.addListener(markers['.$i.'], "click", function() {
info['.$i.'].open(peta,markers['.$i.']);
});
';
$i++;
}
// echo JS
echo $js;
?>
}
Any solution to make InfoWindow auto close when another marker clicked?
I have tried several solutions on Stackoverflow and Google but didn't worked. Thanks for your kindly help :)
You could declare just one infowindow, outside of your loop. Then each marker, when clicked, opens that infowindow on itself, filling it with the proper contents.
In the following example I set the contentString property on the marker itself.
var infowindow = new google.maps.InfoWindow();
<?php
foreach ($query->result() as $value) {
....
?>
var marker = new google.maps.Marker({
position: point,
map: peta,
icon: gambar_marker,
clickable: true,
content: contentString
});
markers.push(marker);
google.maps.event.addListener(marker, "click", function() {
infowindow.setContent(marker.content);
infowindow.open(peta,marker);
});
<?php
}
?>
Maybe this link will be of use to you?
Previously answered: Close infowindow when another marker is clicked
Make sure to declare the global variable outside the main google maps code in your JS:
file: var lastOpenedInfoWindow;
Good luck!
I have a question. I make a project using google maps. i put 30 data on database. but when i wanna show the marker on the map, it only load for 10 data. also when I filter my data based on the category, it load for 10 data only. I check inspact element on my browser (im using mozilla) and found this error : "SyntaxError: unterminated string literal" what does it means?
Here's my code to show markers & map on the web :
<?php
$title = "Peta Masjid";
include_once "header.php";
?>
<div class="row">
<div class="col-md-12">
<div class="panel panel-info panel-dashboard centered">
<div class="panel-heading">
<h2 class="panel-title"><strong> <?php echo $title ?> </strong></h2>
</div>
<div class="panel-body">
<div id="map" style="width:100%;height:380px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAbXF62gVyhJOVkRiTHcVp_BkjPYDQfH5w">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(-6.966667, 110.416664),
disableDefaultUI: true
};
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);
setMarkers(map, officeLocations);
}
var officeLocations = [
<?php
$data = file_get_contents('http://localhost:8082/sig/getdata.php');
$no=1;
if(json_decode($data,true)){
$obj = json_decode($data);
foreach($obj->results as $item){
?>
['<?php echo $item->id_masjid ?>','<?php echo $item->nama_masjid ?>','<?php echo $item->alamat ?>', '<?php echo $item->longitude ?>', '<?php echo $item->latitude ?>','<?php echo $item->gambar ?>'],
<?php
}
}
?>
];
function setMarkers(map, locations)
{
var globalPin = 'img/tanda.png';
for (var i = 0; i < locations.length; i++) {
var office = locations[i];
var myLatLng = new google.maps.LatLng(office[4], office[3]);
var infowindow = new google.maps.InfoWindow({content: contentString});
var contentString =
'<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h5 id="firstHeading" class="firstHeading">'+ office[1] + '</h5>'+
'<div id="bodyContent">'+
'<p>' + office[2] + '</p>' +
'<p><img src="img/'+office[5]+'" style="width:50%;height:190px;" /></p>' +
'<p><a href=detail.php?id='+office[0]+'>Info Detail</p></a>'+
'</div>'+
'</div>';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: office[1],
icon:'img/tanda.png'
});
google.maps.event.addListener(marker, 'click', getInfoCallback(map, contentString));
}
}
function getInfoCallback(map, content) {
var infowindow = new google.maps.InfoWindow({content: content});
return function() {
infowindow.setContent(content);
infowindow.open(map, this);
};
}
initialize();
</script>
</div>
</div></div></div>
</div>
</div>
<?php include_once "footer.php"; ?>
And here's code to get data from database (getdata.php)
<?php
include "connection.php";
$Q = mysql_query("SELECT * FROM mosques WHERE category = 'Mushola'")or die(mysql_error());
if($Q){
$posts = array();
if(mysql_num_rows($Q))
{
while($post = mysql_fetch_assoc($Q)){
$posts[] = $post;
}
}
$data = json_encode(array('results'=>$posts));
echo $data;
}
?>
You can use a counter in your while loop that counts to ten and then breaks the loop or an if statement than only runs if the counter is not 10
-Aron DC
I have this script that call posts as markers into a Google Maps:
<?php
$args = array( 'post_type' => 'braiders', 'posts_per_page' => -1 );
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ): ?>
<!-- WordPress has found matching posts -->
<div class="results-main-content">
<div class="results-group-items">
<?php $i = 1; ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php if ( get_post_meta($post->ID, 'martygeocoderlatlng', true) !== '' ) : ?>
<div class="result-list-items">
<div class="results-left">
<?php
if ( has_post_thumbnail() ) {
// Get the post thumbnail URL
$feat_image = wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) );
?>
<a href="<?php the_permalink(); ?>"><div class="result-items-image" style="background-image: url(<?php echo $feat_image; ?>);">
<p><?php the_title(); ?>
</p>
</div>
</a>
<?php } ?>
<!-- .result-items-image -->
</div>
<!-- results-left -->
<div class="result-right">
<?php the_content(); ?>
</div>
<!-- result-right -->
</div>
<!-- result-list-items -->
<?php endif; ?>
<?php $i++; ?>
<?php endwhile; ?>
</div>
<!-- results-group-items -->
</div>
<!-- .results-main-content -->
<script type="text/javascript">
var locations = [
<?php $i = 1; while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php if ( get_post_meta($post->ID, 'martygeocoderlatlng', true) !== '' ) : ?> {
latlng: new google.maps.LatLng <?php echo get_post_meta($post->ID, 'martygeocoderlatlng', true); ?>,
info: document.getElementById( 'item<?php echo $i; ?>' )
},
<?php endif; ?>
<?php $i++; endwhile; ?>
];
</script>
and this next script that displays the map based on manually coded latlng:
var infowindow = new google.maps.InfoWindow();
var pinkmarker = new google.maps.MarkerImage('/wp- content/themes/halfempty/pink_Marker.png', new google.maps.Size(18, 32) );
var shadow = new google.maps.MarkerImage('/wp- content/themes/halfempty/shadow.png', new google.maps.Size(37, 34) );
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(35.1495343, -90.0489801),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: locations[i].latlng,
icon: pinkmarker,
shadow: shadow,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i].info);
infowindow.open(map, marker);
}
})(marker, i));
}
}
I would like to know how to alter the above .js script that centers the Google to actually center the map based on user location when they access the page through their browser?
All I know is I need to dynamically pull the latlng of the visitor/user instead of manually coding it.
Thank you for taking a crack at it.
You can use the following script:
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
user_location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(user_location);
});
} else {
/* Browser doesn't support Geolocation */
}
Caveat: Some browsers do not support this without SSL. As of Chrome 50, the Geolocation API will only work on secure contexts such as HTTPS. If your site is hosted on an non-secure origin (such as HTTP) the requests to get the users location will no longer function.
Your code should now look like this:
var infowindow = new google.maps.InfoWindow();
var pinkmarker = new google.maps.MarkerImage('/wp- content/themes/halfempty/pink_Marker.png', new google.maps.Size(18, 32) );
var shadow = new google.maps.MarkerImage('/wp- content/themes/halfempty/shadow.png', new google.maps.Size(37, 34) );
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(35.1495343, -90.0489801),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: locations[i].latlng,
icon: pinkmarker,
shadow: shadow,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i].info);
infowindow.open(map, marker);
}
})(marker, i));
}
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
user_location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(user_location);
});
} else {
/* Browser doesn't support Geolocation */
}
}