Develop Reference

Laravel maps markers are not displaying?

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

How to customize two google maps with javascript on one page?

I need two Google maps on one page. Both of maps should have multiple pins on it. One map show hotels, another one restaurants. I tried to add pins and location names with javascript but all pins shows one location name.
This is html code for maps:
Hotels map:
<div id="map-accommodation" class="interactive-map" style="width: 100%; height: 500px;"></div>
Restaurants map:
<div id="map-food" class="interactive-map" style="width: 100%; height: 500px;"></div>
This is script code for maps:
Hotels map:
var locations = [
['Sheraton', 41.646230, 41.649160, 1],
['Hilton', 41.627184, 41.5991094, 2],
['Radisson', 41.6296321, 41.6002718, 3]
];
var map = new google.maps.Map(document.getElementById('map-accommodation'), {
zoom: 12,
center: new google.maps.LatLng(41.616756, 41.636745),
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));
}
Restaurants map:
var locations = [
['360 Cloud bar', 41.6472564, 41.6251435, 1],
['Sky bar', 41.6479619, 41.6275468, 2],
['Sky tower', 41.6479619, 41.6275468, 3]
];
var map = new google.maps.Map(document.getElementById('map-food'), {
zoom: 12,
center: new google.maps.LatLng(41.616756, 41.636745),
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));
}
So these maps show different locations, hotels map shows me only hotels, restaurants map shows me only restaurant pins, but all of them have one name - "sky tower".
Can you explain why and how can I fix it?

Use a unique array for each map (i.e. hotels, restaurants) and if you want each map to have its own InfoWindow (both maps currently share one InfoWindow), make a unique one of those as well.
var hotels = [
['Sheraton', 41.646230, 41.649160, 1],
['Hilton', 41.627184, 41.5991094, 2],
['Radisson', 41.6296321, 41.6002718, 3]
];
var map = new google.maps.Map(document.getElementById('map-accommodation'), {
zoom: 12,
center: new google.maps.LatLng(41.616756, 41.636745),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < hotels.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(hotels[i][1], hotels[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(hotels[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
var restaurants = [
['360 Cloud bar', 41.6472564, 41.6251435, 1],
['Sky bar', 41.6479619, 41.6275468, 2],
['Sky tower', 41.6479619, 41.6275468, 3]
];
var map = new google.maps.Map(document.getElementById('map-food'), {
zoom: 12,
center: new google.maps.LatLng(41.616756, 41.636745),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < restaurants.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(restaurants[i][1], restaurants[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(restaurants[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
proof of concept fiddle
code snippet:
"use strict";
// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function initMap() {
var hotels = [
['Sheraton', 41.646230, 41.649160, 1],
['Hilton', 41.627184, 41.5991094, 2],
['Radisson', 41.6296321, 41.6002718, 3]
];
var map = new google.maps.Map(document.getElementById('map-accommodation'), {
zoom: 12,
center: new google.maps.LatLng(41.616756, 41.636745),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < hotels.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(hotels[i][1], hotels[i][2]),
map: map
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(hotels[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
var restaurants = [
['360 Cloud bar', 41.6472564, 41.6251435, 1],
['Sky bar', 41.6479619, 41.6275468, 2],
['Sky tower', 41.6479619, 41.6275468, 3]
];
var map = new google.maps.Map(document.getElementById('map-food'), {
zoom: 12,
center: new google.maps.LatLng(41.616756, 41.636745),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < restaurants.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(restaurants[i][1], restaurants[i][2]),
map: map
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(restaurants[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Complex Marker Icons</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map-accommodation" class="interactive-map" style="width: 100%; height: 50%;"></div>
<div id="map-food" class="interactive-map" style="width: 100%; height: 50%;"></div>
</body>
</html>

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/

Calculate the center point of multiple Lat/Long

I am using Google Map to display multiple lat/long points.
But the Google map Javascript code has the code snippet to track the center of lat/long of the available lat/long.
<script type="text/javascript">
var locations = JSON.parse('<?php echo json_encode($data);?>'); //alert (locations);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.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][2], locations[i][3]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
In Above code the line
center: new google.maps.LatLng(),
needs a lat/long pair which could be the center point of multiple lat/long to be displayed.
How could that be done?

This works. See the documentation of Map.fitBounds and LatLngBounds for details:
<script type="text/javascript">
var locations = JSON.parse('<?php echo json_encode($data);?>');//alert (locations);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2],locations[i][3]),
map: map
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
</script>
code snippet:
var locations = JSON.parse(
JSON.stringify([
['AAA', 'BBB', 42, -72],
['BBB', 'CCC', 42.1, -72.2]
])); //alert (locations);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
map: map
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

You should get the bounds of your added markers with the function map.getBounds().
It returns an object on which you can get the center bound.getCenter().
See Find center of multiple locations in Google Maps