I have a database which contains addresses. I wish to display these addresses on a google map. I succeeded in generating a json file like this
$json = "https://maps.googleapis.com/maps/api/geocode/json?address=" . $row["HUISNUMMER"] . "+" . $row["STRAATNAAM"] . "+" . $row["STAD"] . "&key=MYPRIVATEKEY";
I can get the lat and long through php like this (in the same loop where I show the database records):
$jsonzip = file_get_contents($json);
$jsondata = json_decode($jsonzip,true);
$jsonlat = $jsondata['results']['0']['geometry']['location']['lat'];
$jsonlong = $jsondata['results']['0']['geometry']['location']['lng'];
And now I'm stuck turning these into markers.
For now I have the default google code to show a marker
<script>
function initMap() {
var myLatLng = {lat: 50.6847204, lng: 4.1045525};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
How would I add all the locations on the map?
You will first need to get the PHP variable into the javascript, an example:
<?php echo json_encode($jsondata); ?>
Then a for loop whith the creaton of a marker inside it. Something like:
for(var i = 0; i < jsondata.length; i++){
var marker = new google.maps.Marker({
position: jsondata[i]['geometry']['location']['lat'],
map: map,
title: 'Hello World!'
});
}
try this
$locations = json_decode($jsonzip, true);
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position : new google.maps.LatLng(locations[i]['geometry']['location']['lat'], locations[i]['geometry']['location']['lng']),
map : map,
animation : google.maps.Animation.DROP,
icon : new google.maps.MarkerImage( '/PATH/marker.svg', null, null, null, new google.maps.Size(24, 24) ),
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('<h3>TITLE</h3>');
infowindow.open(map, marker);
}
})(marker, i));
}
for more informations: https://www.revilodesign.de/blog/google-maps-api/google-maps-api-karte-mit-mehreren-marker-und-infowindow/
Related
The problem is when I pass the data controller to blade/JS, first I am converting it to JSON(because no other way) and then pass it to da javascript. But my label is not work properly. The script code is right below.
var estates = <?php echo json_encode($estates);?>
function initMap()
{
var options =
{
zoom : 10,
center : {lat:34.652500, lng:135.506302}
};
var map = new google.maps.Map(document.getElementById('map'), options);
for (var i=0; i < estates.length; i++) {
#foreach ($estates as $est)
var marker = new google.maps.Marker({
map: map,
label: estates.price,
position: {
lat: {{$est->lat}},
lng: {{$est->lng}}
}
});
#endforeach
}
}
So if I try to pass price is like this {{$est->price}} then I get syntax token error. Because price is varchar with Japanese characters. So I need to convert it Json first and itetare it. But when I do that, there are no markers and label in the map. Just empty map, also there is no error in the console too? If I delete the JS for loop then markers are coming but no label...
Is anyone know what am I missing here?
Try to use new google.maps.LatLng() function:
var estates = <?php echo json_encode($estates);?>
//estates = <?php echo json_decode($estates);?>
function initMap()
{
var options =
{
zoom : 10,
center : {lat:34.652500, lng:135.506302}
}
var map = new google.maps.Map(document.getElementById('map'), options);
for (var i=0;i<estates.length;i++){
var latLng_ = new google.maps.LatLng(estates['lat'],estates['lng']);
var marker = new google.maps.Marker({
map: map,
position: latLng_,
icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAy10Br9W1wWCSQNPc6f9CarvNEO4qqCg1BDbe7_mYZqHwXj3v',
label: estates['price']
});
var infoWindow = new google.maps.InfoWindow({
content: estates['price']
});
marker.addListener('click', function () {
infoWindow.open(map, marker)
});
}
}
I'm storing my data to a php array and trying to pass it to javascript to get google maps display all the points in the php array. bellow is the php code (simplified and the javascript code for google maps.
-----PHP CODE--------
foreach(json_decode($response)->data as $item){
$name= $item->user->name;
$latitude = $item->latitude;
$longitude = $item->longitude;
$Array[$count] = array('name'=>$name,'lat'=>$latitude, 'long'=>$longitude, 'rgb'=>$count);
$js_array = json_encode($Array);
$count++;}
-----javascript
<script type="text/javascript">
var locations = <?php echo $js_array;?>;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
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
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
UPDATED JAVASCRIPT
var locations = <?php echo json_encode($js_array);?>;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(<?php echo $latitude;?>, <?php echo $longitude;?>),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
console.log(locations[i].lat);
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i].lat, locations[i].long),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i].name);
infowindow.open(map, marker);
}
})(marker, i));
}
In your updated javascript, you need to remove json_encode (already present in PHP). You were doing it twice.
This is what I have... PHP pulls down 10 pairs of lat/long from an API url which I have managed to get working okay but I cannot seem to plot them on a map with multiple markers labelled 1-10.
My php code:
<?php
// Loading Domus API
$url_search = 'http://url/site/go/api/search';
$xml_search = #simplexml_load_file($url_search) or die ("no file loaded") ;
//Displaying latitude and longutude
$house = json_encode($house);
}; ?>
JavaScript bit:
var locations = "<?php foreach($xml_search->property as $house) { echo $lat = $house->address->latitude , $long = $house->address->longitude;}; ?>";
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(37.0625,-95.677068),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
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
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
Which is then needs to be displayed in here
<div id="map" style="width: 500px; height: 400px"></div>
But I just get a blank page, of course.
Okay, I've managed to figure it out.
Here is my php code in the head part
<?php
// Loading Domus API
$url_search = 'http://url/site/go/api/search';
$xml_search = #simplexml_load_file($url_search) or die ("no file loaded") ;?>
Then I have my javascript
// Load property ID followed by Lat and Long for each house (total of 10)
var locations = [<?php foreach($xml_search->property as $house) {
echo '['.$house->id. ',' .$house->address->latitude. ',' .$house->address->longitude.'],';
} ?>];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
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
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
Works beautifully, now just need to set up labelled markers and I am good to go.
i have a problem with placing multiple marker in google map.here is my code.it display only one marker during page reloading and when page is complettly load then map is not display.
javascript code:
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize(lat,lon)
{
var myCenter=new google.maps.LatLng(lat,lon);
var mapProp = {
center:myCenter,
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
php code:
<?php
require_once 'geocode.php';
$addarray=array(0=>'a, ahmedabad,india',1=>'b,ahmedabad,india');
foreach($addarray as $add)
{
// define the address and set sensor to false
$opt = array (
'address' => urlencode($add),
'sensor' => 'false'
);
// now simply call the function
$result = getLatLng($opt);
// if status was successful, then print the lat/lon ?
if ($result['status']) {
echo '<pre>';
?>
<script>
initialize(<?php echo $result['lat'];?>,<?php echo $result['lon'];?>);
</script>
<?php
echo '</pre>';
}
}
?>
here first i got lat and lon according to address then i called javascript function to place marker.but something is missing or create a problem.
thanks in advance.
Thanks #Tudor Ravoiu for your help. it is solved by changing few things.
i have created array in json format in php and pass it to javascript.
<?php
require_once 'geocode.php';
$addarray=array(0=>'a,ahmedabad,india',1=>'b,ahmedabad,india',2=>'c,ahmedabad,india');
$lat1=array();
foreach($addarray as $add)
{
// define the address and set sensor to false
$opt = array (
'address' => urlencode($add),
'sensor' => 'false'
);
// now simply call the function
$result = getLatLng($opt);
// if status was successful, then print the lat/lon ?
if ($result['status'])
{
array_push($lat1,array($result['address'],$result['lat'],$result['lon']));
}
}echo json_encode($lat1);
?>
javascript code:
<script type="text/javascript">
var locations = <?php echo json_encode($lat1);?>;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(23.0171240, 72.5330533),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
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
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
You have to set the array as a global var. Also notice that markers_array is an object that contain all the markers latitudes and longitudes and also other data if you want to initialize an infowindow also.
var markers;
var map;
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
for(i=0;i<markers_array.length;i++){
addMarker(markers_array[i].lat,markers_array[i].long);
}
function addMarker(lat,lng) {
var myLatlng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
name: zip
});
markers.push(marker);
}
LATER EDIT:
Here is an example of the marker array in json format:
[
{
"name":"Marker 1 Italy",
"lat":"46.027482",
"long":"11.114502"
},
{
"name":"Marker 2 France",
"lat":"48.019324",
"long":"3.555908"
},
{
"name":"Marker 3 Spain",
"lat":"40.329796",
"long":"-4.595948"
}
]
I try to display a small map within a google map infowindow. The purpose is once the user click on the marker, an infowindow opens with a small map in it displaying the satellite view. The main code below is working quite well. The only thing is that I have an empty 'map_loc' because I don't know where to put the 'var map_loc'.
I'm using a query in a while loop from a mysql database to get the informations required.
Basically my question is, where do I have to put that portion of code in the main code below to display the small map named 'map_loc' which the div is in the marker 'locations':
var map_loc = new google.maps.Map(document.getElementById('map_loc'), {
zoom: 17,
center: new google.maps.LatLng(<?php echo $latlng_loc?>),
mapTypeId: google.maps.MapTypeId.SATELLITE
});
-
<div id="map" style="width:600px; height:600px;"></div>
<script type="text/javascript">
var locations = [
<?php
while ($x = $req->fetch())
{
// variables obtained :
$name = $d['name'];
$latlng_loc = $d['latlng']; // I need it to display the marker at the good location but also now to display the map within the infowindow
?>
['<h3><?php echo $name;?></h3><div id="loc_map" style="width:250px; height:150px;"></div>', <?php echo $latlng_loc?>],<?php
}
?>
];
// here is the main map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(<?php echo $latlng?>),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
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
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
Thanks for any help.
infowindow of google map, It can be use HTML intent .. try this:
example to 1 marker:
var content1 = '<div id="smallmap1"></div>';
var map_loc;
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(content1);
infowindow.open(map, marker);
set_small_map(i);
}
})(marker, i));
//"smallmap"+i == smallmap1, if i == 1;
function set_small_map(i){
map_loc = new google.maps.Map(document.getElementById("smallmap"+i), {
zoom: 17,
center: new google.maps.LatLng(<?php echo $latlng_loc?>),
mapTypeId: google.maps.MapTypeId.SATELLITE
});
};