Develop Reference

How to fix searchbox error ini google maps

I'm having problems with Google Maps. if what I did the first time was to choose a location on google maps, after that I typed the other location in the searchbox there was no problem. but when I type the location first in the searchbox without selecting the location at the beginning there is an error.
TypeError: marker.setPosition is not a function
<script type="text/javascript">
var map;
var marker = false;
function initMap() {
<?php if ($customer['lat'] != '0.00000000' && $customer['lng'] != '0.00000000'): ?>
var myLatLng = {lat: <?php echo $customer['lat']; ?>, lng: <?php echo $customer['lng']; ?>};
var centerOfMap = new google.maps.LatLng(<?php echo $customer['lat']; ?>, <?php echo $customer['lng']; ?>);
<?php else: ?>
var centerOfMap = new google.maps.LatLng(-6.2115, 106.8452);
<?php endif; ?>
var options = {
center: centerOfMap,
zoom: 15
};
map = new google.maps.Map(document.getElementById('map'), options);
<?php if ($customer['lat'] != '0.00000000' && $customer['lng'] != '0.00000000'): ?>
marker = new google.maps.Marker({
position: myLatLng,
map: map,
draggable: true
});
<?php endif; ?>
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
marker.setPosition(place.geometry.location);
map.setCenter(place.geometry.location);
});
});
google.maps.event.addListener(map, 'click', function(event) {
var clickedLocation = event.latLng;
if (marker === false){
marker = new google.maps.Marker({
position: clickedLocation,
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function(event){
markerLocation();
});
} else{
marker.setPosition(clickedLocation);
}
});
}
$(function(){
$('#save-map').on('click touchstart', function(){
var currentLocation = marker.getPosition();
$('input[name="lat"]').val(currentLocation.lat());
$('input[name="lng"]').val(currentLocation.lng());
$('#mapModal').modal('hide');
$('#img-map').html('<img src="https://maps.googleapis.com/maps/api/staticmap?center='+currentLocation.lat()+','+currentLocation.lng()+'&markers='+currentLocation.lat()+','+currentLocation.lng()+'&scale=2&size=640x100&zoom=15&key=<?php echo getenv('GOOGLE_MAP_API_KEY'); ?>" class="img-fluid" style="width: 100%;">');
});
});
</script>
how do i modify this javascript script so there are no problems. if the user types the address directly in the search box the first time the marker will run as desired

I replaced the var marker & defined the position map when the user directly typed in the searchbox column.
var map;
var marker = [];
function initMap() {
<?php if ($customer['lat'] != '0.00000000' && $customer['lng'] != '0.00000000'): ?>
var myLatLng = {lat: <?php echo $customer['lat']; ?>, lng: <?php echo $customer['lng']; ?>};
var centerOfMap = new google.maps.LatLng(<?php echo $customer['lat']; ?>, <?php echo $customer['lng']; ?>);
<?php else: ?>
var centerOfMap = new google.maps.LatLng(-6.2115, 106.8452);
<?php endif; ?>
var options = {
center: centerOfMap,
zoom: 15
};
map = new google.maps.Map(document.getElementById('map'), options);
<?php if ($customer['lat'] != '0.00000000' && $customer['lng'] != '0.00000000'): ?>
marker = new google.maps.Marker({
position: myLatLng,
map: map,
draggable: true
});
<?php else: ?>
marker = new google.maps.Marker({
position: centerOfMap,
map: map,
draggable: true
});
<?php endif; ?>
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
marker.setPosition(place.geometry.location);
map.setCenter(place.geometry.location);
});
});
google.maps.event.addListener(map, 'click', function(event) {
var clickedLocation = event.latLng;
if (marker === false){
marker = new google.maps.Marker({
position: clickedLocation,
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function(event){
markerLocation();
});
} else{
marker.setPosition(clickedLocation);
}
});
}
$(function(){
$('#save-map').on('click touchstart', function(){
var currentLocation = marker.getPosition();
$('input[name="lat"]').val(currentLocation.lat());
$('input[name="lng"]').val(currentLocation.lng());
$('#mapModal').modal('hide');
$('#img-map').html('<img src="https://maps.googleapis.com/maps/api/staticmap?center='+currentLocation.lat()+','+currentLocation.lng()+'&markers='+currentLocation.lat()+','+currentLocation.lng()+'&scale=2&size=640x100&zoom=15&key=<?php echo getenv('GOOGLE_MAP_API_KEY'); ?>" class="img-fluid" style="width: 100%;">');
});
});

difficulty showing different marker colors in php

I have difficulty in showing different marker colors. this marker color difference is based on a value from the database.
this is coding to bring up maps and markers
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"
type="text/javascript">
</script>
<script type="text/javascript">
var map;
function init(){
map = new google.maps.Map(document.getElementById('maps'), {
zoom: 10,
center: new google.maps.LatLng(-7.320795, 112.731386),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
<?php foreach($get_data->result() as $row) {
$nilai = $row->nilai;
if($nilai >= 0 && $nilai <=50) {?>
var icons = {
info: {
icon: '<?php echo base_url("assets/marker_merah.png");?>'
}
};
<?php }elseif($nilai >= 51 && $nilai <=69){ ?>
var icons = {
info: {
icon: '<?php echo base_url("assets/marker_hijau.png");?>'
}
};
<?php }elseif($nilai >= 70) { ?>
var icons = {
info: {
icon: '<?php echo base_url("assets/marker_biru.png");?>'
}
};
<?php }
} ?>
var features = [
<?php foreach($get_data->result() as $row){ ?>
{
position: new google.maps.LatLng(<?php echo $row->lat;?>,<?php echo $row->long;?>),
type: 'info',
title : '<?php echo $row->nama;?>'
},
<?php } ?>
];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
title: feature.title,
map: map
});
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
I want to bring up red markers for values 0-50, green for values 51-69, and blue for values 70 and above.
after I run the code above, I find all markers are only green, and red and blue markers do not appear.
please help me.

You execute the following loop <?php foreach($get_data->result() as $row) { two times in your code.
The first time it will generate in JavaScript something similar to
var icons = {
info: {
icon: 'assets/marker_hijau.png'
}
};
var icons = {
info: {
icon: 'assets/marker_merah.png>'
}
};
var icons = {
info: {
icon: 'assets/marker_biru.png>'
}
};
var icons = {
info: {
icon: 'assets/marker_merah.png>'
}
};
So, you just redefine the same variable multiple times and clearly the JavaScript will use the last value that you assigned to icons variable.
The second loop creates an array structure and I would suggest put icon initialization in the second loop as well, so you can define icon property of each feature and use it later in JavaScript.
I would rewrite your code to something similar to
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
type="text/javascript">
</script>
<script type="text/javascript">
var map;
function init(){
map = new google.maps.Map(document.getElementById('maps'), {
zoom: 10,
center: new google.maps.LatLng(-7.320795, 112.731386),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var features = [
<?php foreach($get_data->result() as $row) {
$nilai = $row->nilai; ?>
{
position: new google.maps.LatLng(<?php echo $row->lat;?>,<?php echo $row->long;?>),
type: 'info',
<?php if($nilai >= 0 && $nilai <=50) {?>
icon: '<?php echo base_url("assets/marker_merah.png");?>',
<?php } elseif($nilai >= 51 && $nilai <=69) { ?>
icon: '<?php echo base_url("assets/marker_hijau.png");?>',
<?php } elseif($nilai >= 70) { ?>
icon: '<?php echo base_url("assets/marker_biru.png");?>',
<?php } ?>
title : '<?php echo $row->nama;?>'
},
<?php } ?>
];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: feature.icon,
title: feature.title,
map: map
});
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
I hope this helps!

Xenomena is right, you're js is replace each other.. my guessing you get the code from
https://developers.google.com/maps/documentation/javascript/custom-markers
You must careful see there is multidimensional array there.
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
So, my answer is :
var icons = {
info1: {
icon: 'icons/blue.png'
},
info2: {
icon: 'icons/white.png'
},
info3: {
icon: 'icons/red.png'
}
};
That's make mltidimensional array for icon, then i make my own latlong data in array get_lang, and nilai data in array get_data :
foreach($get_lat as $i=>$row){ ?>
{
position: new google.maps.LatLng(<?php echo $row[0];?>,<?php echo $row[1];?>),
<?php
if($get_data[$i] <50) {?>
type: 'info1',
<?php } elseif ($get_data[$i] >= 51 && $get_data[$i] <=69){ ?>
type: 'info2',
<?php } else { ?>
type: 'info3',
<?php } ?>
title : "<?php echo $row[0];?>"
},
<?php } ?>
];
Suggestion, next time when you post you're code, you need post you're sample input as well.
The full works code :
https://pastebin.com/dWj5wjTE
Hope this help.

how to use marker cluster with php mysql database

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>

Only load 10 markers from database

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

Google Maps Marker Content in box

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.