Laravel maps markers are not displaying?

Laravel maps markers are not displaying? - javascript

I am trying to get my google maps markers to display onto my laravel project, but none of the markers seem to be showing. I have done a dd() on places and it shows that it is getting information from the database. But for some reason none of the markers seem to be showing.
#section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=env(GOOGLE_MAPS_API_KEY)"></script>
<script src="={{asset('js/app.js')}}"></script>
<div id="map" style="width: 100%; height: 500px;"></div>
<script type="text/javascript">
var places = <?php echo json_encode($places); ?>;
console.log(places);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(56, -1.56),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < places.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(places[i][1], places[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(places[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
With the controller:
public function index()
{
//
$crags = DB::table('places')->get();
return view('users/map',compact('places'));
}
This is what the first item of my arays looks like as well:
0 => {#1312
+"id": 2
+"name": "stanage"
+"location": "sheffield"
+"latitude": 53
+"longitude": 2
+"created_at": "2022-03-03 21:36:49"
+"updated_at": "2022-03-03 21:36:49"
}

0 => {#1312
+"id": 2
+"name": "stanage"
+"location": "sheffield"
+"latitude": 53
+"longitude": 2
+"created_at": "2022-03-03 21:36:49"
+"updated_at": "2022-03-03 21:36:49"
}
You should acces your place data like place[i].latitude, place[i].longitude not places[i][1]
marker = new google.maps.Marker({
position: new google.maps.LatLng(places[i].latitude, places[i].longitude),
map: map
});

Related

how to click google map marker to open accordion item

so i have a google map with markers on my web page and basically want to click a marker i have set up to activate a corresponding accodion menu item .. how do i do this ?
the javascript for markers on the map ...
<script type="text/javascript">
var locations = [
['Willow Bank', 53.3929025,-2.9339415,17],
['Landmark', 53.3943626, -2.936234,18]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(53.3925822,-2.9266926,16.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));
}
</script>
and the accorion items using jquery ui accodion....
<div id="accordion">
<h3>1. LANDMARK</h3>
<div>HELLO WORLD !! </div>
<h3>2. WILLOWBANK</h3>
<div>HELLO WORLD !!</div>
any help here much appreciated

<style>
#map {
height: 400px;
}
</style>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
function initialize() {
// make sure the <a class="maps"> elements have the same order as the locations
var locations = [
['Landmark', 53.3943626, -2.936234, 18],
['Willow Bank', 53.3929025, -2.9339415, 17]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(53.3925822,-2.9266926,16.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);
// induce a click on the <h3><a></a></h3>
$("#accordion").find('.maps').eq(i).trigger('click');
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
$("#accordion").accordion();
});
</script>
<div id="map"></div>
<div id="accordion">
<h3><a class="maps" href="#">1. LANDMARK</a></h3>
<div>HELLO WORLD !! </div>
<h3><a class="maps" href="#">2. WILLOWBANK</a></h3>
<div>HELLO WORLD !!</div>
</div>
Notice, I've been a bit lazy; I trigger a click on the anchor instead of using jQuery-ui accordion methods

Google Maps API - Marker array only showing the first marker

I have just started working with the Google Maps API, and am trying to display multiple markers across an array of data.
However I am getting a marker for just the first location in my list, which I guess means my loop isn't working properly, but I am not getting any errors to work from.
var mapOptions = {
center: centralLatlng,
zoom: 2
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var cdnLocations = [
['LondonMarker', 51.500, 0.1167],
['NewYorkMarker', 40.7127, -74.0059],
['TokyoMarker', 35.6895, 139.6917],
['BerlinMarker', 52.5167, 13.3833],
['ParisMarker', 48.8567, 2.3508],
['MadridMarker', 40.4000, 3.6833],
]
for (var i = 0; i < cdnLocations.length; i++) {
var cdnLocations = cdnLocations [i]
var marker = new google.maps.Marker({
position: new google.maps.LatLng (cdnLocations[1], cdnLocations[2]),
map: map,
});
}

Check this out:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var locations = [
['LondonMarker', 51.500, 0.1167],
['NewYorkMarker', 40.7127, -74.0059],
['TokyoMarker', 35.6895, 139.6917],
['BerlinMarker', 52.5167, 13.3833],
['ParisMarker', 48.8567, 2.3508],
['MadridMarker', 40.4000, 3.6833],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
center: new google.maps.LatLng(35.68, 139.69),
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));
}
</script>
</body>
</html>
Here a jsfiddle example:
http://jsfiddle.net/m2htynto/

Place multiple php vars as lat/long in Google Maps

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.

Display a map (google) within a marker infowindow

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
});
};

Google Map API Implementation with variable calling

This is my Google map code below:
<div id="map_canvas" style="width: 500px; height: 400px;"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
InitMap("[['Leslie Fleming',41.977, -71.3248, 1 ],['Chris Reale',41.977, -71.3248, 2 ],['Michael Anello',41.977, -71.3248, 3 ],['Ed Pariseau Jr',41.977, -71.3248, 4 ],['Ryan Higgens',41.977, -71.3248, 5 ]]", "41.977, -71.3248");
function InitMap(MapElement, MapPointer){
var locations = MapElement;
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(MapPointer),
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));
}
}
</script>
Why it is not working? Am I doing anything wrong?

See the code I have solve it. This is multiple marker Google map. You can use it through AJAX. I don't need to hire a programmer. I can able to solve it.
<div id="map_canvas" style="width: 500px; height: 400px;"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
InitMap([["Leslie Fleming",41.977, -71.3248, 1 ],["Chris Reale",41.977, -71.3248, 2 ],["Michael Anello",41.977, -71.3248, 3 ],["Ed Pariseau Jr",41.977, -71.3248, 4 ],["Ryan Higgens",41.977, -71.3248, 5 ]], 41.977, -71.3248);
function InitMap(MapElement, latitude, longitude){
var locations = MapElement;
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
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));
}
}
</script>

See the code I have solve it. This is multiple marker Google map. You can use it through AJAX. I don't need to hire a programmer. I can able to solve it.
<div id="map_canvas" style="width: 500px; height: 400px;"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
InitMap([["Leslie Fleming",41.977, -71.3248, 1 ],["Chris Reale",41.977, -71.3248, 2 ],["Michael Anello",41.977, -71.3248, 3 ],["Ed Pariseau Jr",41.977, -71.3248, 4 ],["Ryan Higgens",41.977, -71.3248, 5 ]], 41.977, -71.3248);
function InitMap(MapElement, latitude, longitude){
var locations = MapElement;
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
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));
}
}
</script>

Develop Reference

JavaScript is the programming language of the Web.

Laravel maps markers are not displaying? - javascript

Related

how to click google map marker to open accordion item

Google Maps API - Marker array only showing the first marker

Place multiple php vars as lat/long in Google Maps

Display a map (google) within a marker infowindow

Google Map API Implementation with variable calling

Categories

Resources