Display multiple locations on Google Map v3 using PHP MYSQL WHILE LOOP - php

I have this code that was once working but now is not. It is for displaying multiple locations on a map using Google maps version 3, by getting the locations from a table in the database, and looping through them using a PHP WHILE loop. Only one location is being displayed. The code is as below:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map ;
function initialize() {
var latlng = new google.maps.LatLng(53.933056, 9.503611);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<?
$query = mysql_query("SELECT
markers.id,
markers.place,
markers.address,
markers.lat,
markers.lng,
markers.description,
markers.type,
images.id,
images.thumb_path,
images.main
FROM
markers,images
WHERE
markers.type = '".$type."'
AND markers.id = images.id
AND images.main = 1
");
$numRows = mysql_num_rows($query);
if($numRows > 0){
while($row = mysql_fetch_assoc($query)){
?>
var contentString = '<div id="content">'+
'<img src="<?=$row['thumb_path'];?>" width="100" height="100" hspace="2" align="left" />'+
'<h4><?=$row['place'];?></h4><p><?=$row['address'];?></p>'+
'<p align="right">More Details'+
'</div>';
var marker = add_marker(<?=$row['lat'];?>, <?=$row['lng'];?>,"<?=strtoupper($row['place']);?>",contentString);
marker.setMap(map);
<? } ?>
<? } ?>
}
function add_marker(lat,lng,title,box_html) {
var infowindow = new google.maps.InfoWindow({
content: box_html
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
title: title
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
return marker;
}
Kindly assist.

Related

Google Map API Not displaying Markers JavaScript

I'm trying to grab latlng co-ords from my database to display them on a webpage which will dynamically update when a user searches for something specific but they aren't showing up at all.
<?php
include_once '../db/dbconnect.php';
$query = "SELECT * FROM property WHERE city='Sheffield' AND type='House'";
$result = $mysqli->query($sql);
$num_rows = mysql_num_rows($result);
if($num_rows > 0){
for($i=0;$i<$num_rows;$i++){
$row=mysql_fetch_row($result);
$location[] = $row[3].','.$row[6].','.$row[7].','.($i+1);
}
}
?>
I'm having problems with fetching the data from the database as $location doesn't seem to have any values inside of it.
I can see issue in your HTML code structure, you have started div tag but it ended after your javascript code. so please start div and end that div then write youyr javascript code as mentioned below.
<div id='map'></div>
<script type="text/javascript">
var locations = <?php echo json_encode($location); ?>;
var map;
function initMap() {
if(typeof locations !== "undefined")
{
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 53.3811, lng: -1.4701},
zoom: 13
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
alert(locations.length);
for (i = 0; i < locations.length; i++) {
loc_array = locations[i].split(",");
marker = new google.maps.Marker({
position: new google.maps.LatLng(loc_array[1], loc_array[2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(loc_array[0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCtf7Q1QeO9cQfwsBo7FQ-g3en_zJbk8Iw&callback=initMap" async defer></script>
I am not sure about this will work.
You php code should be
<?php
include_once '../db/dbconnect.php';
$query = "SELECT * FROM property WHERE city='Sheffield' AND type='House'";
$result = mysql_query($sql);
$location=array();
if(mysql_num_rows($result)> 0){
while($row=mysql_fetch_assoc($result)){
$location[] = array($row['lat'],$row['lng']);
}}
?>

google map v3 OVER_QUERY_LIMIT - Geocoding with PHP MYSQL

I am having error of OVER_QUERY_LIMIT in using google maps api v3. I want to add markers from database by geocoding. If I use limit in sql query then the markers are shown, if I increase the limit greater than 10 then its showing the error.
<?php
mysql_connect('localhost','root','') or die(mysql_error());
mysql_select_db('dbname') or die(mysql_error());
$result = mysql_query("SELECT * FROM deal WHERE cityID=44 LIMIT 10") or die(mysql_error());
$count = 0;
echo mysql_num_rows($result);
$row = mysql_fetch_array($result);
?>
<script type="text/javascript">
var geocoder;
var map;
//var address;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(34.052234,-118.243685);
var address = "<?php echo $row['address']; ?>";
//address = '3655 South Durango, Las Vegas, NV 89147';
//alert(address);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<?php
while($row = mysql_fetch_array($result)){
?>
geocoder.geocode( { 'address': "<?php echo $row['address']; ?>"}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
"<h1 id='firstHeading' class='firstHeading'><?php echo $row['businessName']; ?></h1>"+
'<div id="bodyContent">'+
"<p><?php echo $row['longDesc']; ?></p>"+
'<p>Attribution: Uluru, <a href="#">'+
'Click To See</a> '+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
<?php sleep(1); ?>
} else {
alert("Geocode was not successful for the following reason: " + status);
//setTimeout("wait = true", 2000);
}
});
<?php } ?>
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
You can't geocode more than 2500 locations per day with free version.
Based on my memories, you also have to wait approximatively 0.5 seconds between two geocods, so you must delay you script ; else you'll be blocked.

Add more results in google map dynamically

I am working on this from several hours but no success.
This code is working fine one time and add 100 records on map. Then I want to add more results from db after first 100. how can I do that please guide me. Here is the code.
I also try with ajax but json damage after result came back from php so that is also not work for me.
<div class="span12 geoData">
<?php
$db = new db();
$data = array();
$tweets = array();
$counter = 0;
$query = "SELECT * FROM `tweets` WHERE `geo_lat` != 0 LIMIT 100";
$results = $db->select($query);
$count = mysqli_num_rows($results);
while (($row = mysqli_fetch_assoc($results)) !=FALSE) {
$tweets[$counter]['tweet_text'] = $row['tweet_text'];
$tweets[$counter]['geo_lat'] = $row['geo_lat'];
$tweets[$counter]['geo_long'] = $row['geo_long'];
$counter++;
}
$data['count'] = $count;
$data['tweets'] = $tweets;
$jsonData = json_encode($data);
?>
<script src="mapsApi.js"></script>
<script src="markerclusterer_compiled.js"></script>
<script type="text/javascript">
var data = <?php echo $jsonData; ?>;
function initialize() {
var center = new google.maps.LatLng(39.744408452010475, -100.15602825000002);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
infowindow = new google.maps.InfoWindow({
content: "holding..."
});
var markers = [];
for (var i = 0; i < data.count; i++) {
var contentSTR = '<div id="info"><p><span>Ttitle:</span> '+ data.tweets[i].tweet_text + '</p></div>';
var dataTweets = data.tweets[i];
var latLng = new google.maps.LatLng(dataTweets.geo_lat,
dataTweets.geo_long);
var marker = new google.maps.Marker({
position: latLng,
html: contentSTR,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-container">
<div id="map"></div>
</div>
</div>

What's the easiest way to display multiple locations using Google Map API with MySQL and PHP?

I would like to display over 100 locations each with detailed bubble contents (ie Company Name, Address, Phone Number, Website, Industry) on a custom Google Map. How can I fetch these locations from a MySQL database using Google Maps API 3 and PHP?
say you have an sql database of this type:
id/lat/lon/comment
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key= **your key** &sensor=true">
</script>
$sqlprep = "SELECT * FROM table_name";
$doselect = mysql_query($sqlprep);
echo "<script> var locations = [";
while ($loc = mysql_fetch_assoc($doselect)){
echo "['" .$loc[comment] ."', " . $loc['lat'] . ", " . $loc['lon'] . "";
}
echo " ];</script>";
and then in your java:
<script>jQuery(window).ready(function(){
function initialize() {
var myLatlng = new google.maps.LatLng( YOUR CENTER LAT,LAN HERE );
var myOptions = {
center: myLatlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infowindow = new google.maps.InfoWindow()
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
//adding the pop up windows here:
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
initialize() ;
}); </script>
your html should be something like:
<html>
<body >
<div id="map_canvas" >
</div>
</body>
</html>
i might be missing some parentheses but you get the point ;)
hope it helps even 8 months later :)

showing json output on google map API v3

I have a json output that shows my info correctly but i am having a hell of a time getting it to show a icon on each pair of lat+lng from my DB
Here is my current code
<?php
require('inc/db.inc.php');
mysql_connect($connect, $user, $pword) or die(mysql_error());
mysql_select_db($db) or die(mysql_error());
$sql=mysql_query("SELECT store_lat,store_long FROM location WHERE status='Active'");
while($row=mysql_fetch_assoc($sql))
$output[]=$row;
$locations=(json_encode($output));
?>
<script src="http://maps.google.com/maps/api/js?sensor=false&key=MY_API_KEY" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var image = 'images/icon.png';
var myLatlng = new google.maps.LatLng(42.548625, -92.548765);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var poiJson = <? echo $locations ?>;
for (var i = 0;i < poiJson.length; i += 1) {
var lat = poiJson[i].store_lat;
var lng = poiJson[i].store_long;
addMarker(lat,lng,i);
};
}
function addMarker(lat,lng,no){
var latlng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: latlng,
map: map
// if i uncomment the icon line no map will show at all
//icon: image
});
}
</script>
<? include "header.php"; ?>
<p>
<table width="1024">
<tr>
<td align="center" valign="top"><div id="map_canvas" style="width: 95%; height: 600px;"></div></td>
</tr>
</table>
</p>
</body>
</html>
Edit
if i change the image into the addMarker function this dose not change anything.
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(42.548625, -92.548765);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var poiJson = <? echo $locations ?>;
for (var i = 0;i < poiJson.length; i += 1) {
var lat = poiJson[i].store_lat;
var lng = poiJson[i].store_long;
addMarker(lat,lng,i);
};
}
function addMarker(lat,lng,no){
var image = 'images/icon.png';
var latlng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: latlng,
map: map
//icon: image
});
}
</script>
There is no image defined in the scope of addMarker (hence you will get an error). It is only local to initialize. Either define it in addMarker or make it global.

Categories