Markers not showing up on map - javascript

I am trying to add markers to the google map on my website using data from my database but they are not showing up on the map. I am forbidden from using JQuery to solve to solve this problem. Has to be raw JavaScript.
<?php
require_once ('../Models/DbConnection.php');
require_once ('../Models/LocationData.php');
$conn = new DbConnection();
$loc = array();
$suggestion = "";
$sqlQuery = "SELECT campsite_name, latitude, longitude FROM campsites ";
$result = $conn->SelectQuery($sqlQuery);
foreach($result as $campLoc){
$locat = new LocationData($campLoc['campsite_name'], $campLoc['latitude'], $campLoc['longitude']);
array_push($loc, $locat);
}
?>
<?php require('header.phtml')?>
<head>
<style>
#map {
width: 100%;
height: 700px;
background-color: grey;
}
</style>
</head>
<body>
<h3>Maps</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
var locations = <?php echo json_encode($loc); ?>;
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: 54.344, lng: 15.036};
// The map, centered at Uluru
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 });
}
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});
// The marker, positioned at Uluru
//var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=(My Key)&callback=initMap" type="text/javascript">
</script>
</body>
<?php require('footer.phtml') ?>
I expected the markers to show up on the map but nothing pops up.

Related

Adding multiple markers on Google Maps from MySQL database

I am trying to display multiple markers on Google maps using data (lat and lng) from a MySQL database. When I run a foreach loop to return these markers on the map, it returns only the last row. What might be the problem?
<?php
require_once "db/db_handle.php";
$select = "SELECT * FROM map";
$data = $db->query($select);
?>
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<?php foreach ($data as $key) {
echo $key['lat'];
?>
<script>
function initMap() {
var uluru = {lat: <?php echo $key['lat']; ?>, lng: <?php echo $key['lng']; ?>};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var contentString = '<?php echo $key['address']; ?>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Address)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
</script>
<?php } ?>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap">
</script>
</body>
</html>
It will be very easy to fetch all the lat and long.
require_once "db/db_handle.php";
$select = "SELECT * FROM map";
$data = $db->query($select);
foreach ($data as $key)
$locations[]=array( 'name'=>'Location Name', 'lat'=>$key['lat'], 'lng'=>$key['lng'] );
}
/* Convert data to json */
$markers = json_encode( $locations );
Then set the google map markers using the php variable markers.
<script type='text/javascript'>
<?php
echo "var markers=$markers;\n";
?>
function initMap() {
var latlng = new google.maps.LatLng(-33.92, 151.25); // default location
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById('map'),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
var json=JSON.parse( markers );
for( var o in json ){
lat = json[ o ].lat;
lng=json[ o ].lng;
name=json[ o ].name;
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
name:name,
map: map
});
google.maps.event.addListener( marker, 'click', function(e){
infowindow.setContent( this.name );
infowindow.open( map, this );
}.bind( marker ) );
}
}
Overall code will be :
require_once "db/db_handle.php";
$select = "SELECT * FROM map";
$data = $db->query($select);
foreach ($data as $key)
$locations[]=array( 'name'=>'Location Name', 'lat'=>$key['lat'], 'lng'=>$key['lng'] );
}
/* Convert data to json */
$markers = json_encode( $locations );
?>
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script type='text/javascript'>
<?php
echo "var markers=$markers;\n";
?>
function initMap() {
var latlng = new google.maps.LatLng(-33.92, 151.25); // default location
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById('map'),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
var json=JSON.parse( markers );
for( var o in json ){
lat = json[ o ].lat;
lng=json[ o ].lng;
name=json[ o ].name;
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
name:name,
map: map
});
google.maps.event.addListener( marker, 'click', function(e){
infowindow.setContent( this.name );
infowindow.open( map, this );
}.bind( marker ) );
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap">
</script>
</body>
</html>

Marker doesn't load google maps,

I'm trying to load marker from database but those markers doesn't loaded. However if I try to load manually it's working.
my view view_file.php
var map;
function initialize(lt,lg) {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lt, lg),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
<?php foreach ($position as $row) { ?>
$lat = $row['lat'];
$longi = $row['longi'];
var latLng = new google.maps.LatLng($lat,$longi);
new google.maps.Marker({
position: latLng,
map: map
})
<?php } ?>
}
</script>
</head>
<body onload="initialize(-0.165343, 113.930935)">
<div id="map-canvas" style="width: 100%; height: 600px"></div>
my controller map.php
public function __construct(){
parent::__construct();
$this->load->model('maps');
}
function index(){
$data['position'] = $this->maps->marker();
$this->load->view('include/header');
$this->load->view('view_file', $data);
$this->load->view('include/footer');
}
my model maps.php
function marker(){
$post = $this->db->get('koor');
return $post->result();
}
This code below is works (entered coordinate manually). controller are same like above.
var map;
function initialize(lt,lg) {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lt, lg),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker(-0.735467, 110.521677);
marker(1.549480, 116.124705);
marker(-2.558367, 115.179880);
}
function marker(lt,lg){
var latLng = new google.maps.LatLng(lt,lg);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
</script>
</head>
<body onload="initialize(-0.165343, 113.930935)">
<div id="map-canvas" style="width: 100%; height: 600px"></div>
I've tried to modified my code, searched similiar problem but nothing works, this is last shape of my code.
UPDATE
I've already solve this
var map;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(-0.165343, 113.930935),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var lat, longi, marker;
<?php foreach ($position as $row) { ?>
lat = <?php echo $row->lat ?>,
longi = <?php echo $row->longi ?>,
marker = new google.maps.LatLng(lat,longi);
new google.maps.Marker({
position: marker,
map: map
});
<?php } ?>
}
Your error:
$lat = $row['lat'];
$longi = $row['longi'];
This is showing up in the javascript.
Make sure that it is going to be executed in php and not javascript.
The right code:
<?php
$lat = $row['lat'];
$longi = $row['longi'];
?>
var map;
function initialize(lt,lg) {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lt, lg),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var lat, longi;
<?php foreach ($position as $row) { ?>
lat = <?= $row->lat ?>;
longi = <?= $row->longi ?>;
marker(lat, longi);
<?php } ?>
}
function marker(lt,lg){
var latLng = new google.maps.LatLng(lt,lg);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
</script>
</head>
<body onload="initialize(-0.165343, 113.930935)">
<div id="map-canvas" style="width: 100%; height: 600px"></div>

Referencing a particular location in google maps

I am trying to include google maps on a homepage for the first time and just found the code which creates a google map with a particular location -
var myLatlng1 = new google.maps.LatLng(53.65914, 0.072050)
and I don't know how to change the location where the marker is- where can I find the location coordinates? Thanks!
<html>
<head>
<title> Map </title>
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 500px;
width: 800px;}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script>
var map;
function initialize()
{
var myLatlng1 = new google.maps.LatLng(53.65914, 0.072050);
var mapOptions =
{
zoom: 10,
center: myLatlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
<?php
$sql = mysql_query("SELECT * FROM data ORDER BY ID DESC");
while($row =mysql_fetch_array($sql))
{
$desc = $row['DESCRIPTION'];
$location = $row['LOCATION'];
$counter += 1;
?>
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $location; ?>),
map: map,
title: '<?php echo $desc; ?>',
icon: '/image/cam.png'
});
navigator.geolocation.getCurrentPosition(showPosition);
}
var showPosition = function (position)
{
map.setCenter(new google.maps.LatLng(position.coords.latitude,
position.coords.longitude), 16);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
This is easy . First go to google maps and select the location you want to zoom in on. Once there look at the url at the top of the page it should look like this:
https://www.google.com/maps/#44.0005355,-71.0799974,12z
This is your lat long 44.0005355 and -71.0799974 Just replace them with the ones you have.
The portion of code that set the marker ( included the position) is this
var yourLat = 45.2323; // is only sample value
ver yourLng = 14.1818; // is only sample value
var marker = new google.maps.Marker({
position: new google.maps.LatLng(yourLat, yourLng),
map: map,
title: 'your title',
icon: '/image/cam.png'
});
You must assign the coord in google map notation so if you haven't this coord use google maps and click the point you desise. the coord appear in a box

why my google map isn't loading perfectly?

<h4>Location</h4>
<div class="full-row mt20">
<?php
if(empty($restaurant['Restaurant']['lattitude']))
$restaurant['Restaurant']['lattitude'] = 0;
if(empty($restaurant['Restaurant']['longitude']))
$restaurant['Restaurant']['longitude'] = 0;
?>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(<?php echo $restaurant['Restaurant']['lattitude']; ?>,<?php echo $restaurant['Restaurant']['longitude']; ?>);
var mapOptions = {
zoom: 6,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
var marker=new google.maps.Marker({position:myLatlng});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="googleMap" style="height:250px;"></div>
![enter image description here][1]
![enter image description here][2]
Output image links are: http://i.stack.imgur.com/YGS3X.png
http://i.stack.imgur.com/1SLRK.png
The above portion is my code and my result. I can't find the error. when I drag the map the another portion of the map will invisible. why this happen?
like #KimGyesen said, you must refresh the map using resize.
try this code snippet, may be this help you a little...
$(document).ready(function () {
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
var mapOptions = {
zoom: 6,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
setInterval(function () {
google.maps.event.trigger(map, 'resize');
map.fitBounds();
}, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<body>
<div id="googleMap" style="width:500px; height:400px"></div>
</body>

google map zoom out limit [duplicate]

This question already has an answer here:
Google Maps v3 - limit viewable area and zoom level
12 answers
How do I set zoom out limit on the map, it currently lets me zoom out too far to the point that I see multiple world maps:
JS:
var map;
var all_coor = <?php echo json_encode($addresses); ?>;
var dub = <?php echo json_encode($testadd); ?>;
function initialize() {
var MainLatlng = new google.maps.LatLng(-74.337724,-49.69693);
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(31.386692,-12.700747)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var markerr = new google.maps.Marker({
position: MainLatlng ,
map: map,
title: 'Main',
animation: google.maps.Animation.DROP
});
for (var t = 0, llen = dub.length; t < llen; t++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(dub[t]['lat'], dub[t]['long']),
map: map,
title: dub[t]['title']
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
HTML:
<div id="map-container" style="height: 500px;">
<div id="map-canvas" style="width: 100%; height: 100%"></div>
</div>
1.How can I set a zoom out limit for the map to render properly?
It's been added to the api, you can just set that option directly on the map object:
map.setOptions({ minZoom: 5, maxZoom: 15 });
ref - https://developers.google.com/maps/documentation/javascript/reference#MapOptions

Resources