If I copy and paste the google maps api example in a html file and open the file it works:
However, if I put it in a blade file in Laravel and open it, then its not working. The window is blank and in the console I find the error
TypeError: a is null
[Learn More]
The only thing that I did was to copy and paste the content to test.blade.php and created a route
Route::get('/test', function(){
return view('test');
});
This is the content of my test.blade.php
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=**mysupersaveapikey**&callback=initMap">
</script>
</body>
</html>
What is it that I am missing?
I recomment use dedicated api for google maps in Laravel project:
https://github.com/egeloen/ivory-google-map
use Ivory\GoogleMap\Helper\Builder\ApiHelperBuilder;
use Ivory\GoogleMap\Helper\Builder\MapHelperBuilder;
use Ivory\GoogleMap\Map;
$map = new Map();
$mapHelper = MapHelperBuilder::create()->build();
$apiHelper = ApiHelperBuilder::create()
->setKey('API_KEY')
->build();
echo $mapHelper->render($map);
echo $apiHelper->render([$map]);
Good luck!
Related
I have seen this topic suggesting a solution to the issue i'm facing at the moment although not sure how to implement it since i'm using a code that is part of php system I recently purchased, not sure how to modify my code for it
This is how it runs on my code at the moment
array('file' => '', 'path' => 'https://maps.google.com/maps/api/js?'.$api_key_str.'sensor=false&language=' . $this->option_arr['o_map_language'])
How should I apply the code so I would be able to run google maps more than once in a page?
Thanks!
It seems that you are trying to implement the map more than once and you are calling the Maps Javascript API script tag. Please note that the Maps Javascript API script tag should only be called once and you can add multiple maps in your site by declaring multiple maps instantiation like:
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
Here is a sample as well:
var map;
var map1;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
map1 = new google.maps.Map(document.getElementById('map-1'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 45%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-1 {
height: 45%;
}
<h3>
Map #1
</h3>
<div id="map"></div>
<h3>
Map #2
</h3>
<div id="map-1"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAj0aaMu_aY6xiDSWH0ac_4pqN_l-opwmI&callback=initMap" async defer></script>
Hope this helps.
i am using PHP MYSQL on WordPress with Google Map API where the code retrieve data from the MYSQL database and display markers on the map based on the existing coordinates in the database. also it display a infowindow on click Listener.
the problem is that the infow window doesn't shows any data inside of it.
can anyone one tel me where is the error?
code:
<?php
/*
Template Name: MAP2
*/
get_header();
?>
<!DOCTYPE html>
<html>
<head>
<title>Custom Markers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=**********&callback=initMap">
</script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 600px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map,currentPopup;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(33.888630, 35.495480),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
//icon: icons[feature.type].icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: feature,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
var features = [
<?php
global $wpdb;
$prependStr ="";
foreach( $wpdb->get_results("SELECT siteID, latitude, longitude FROM site_coordinates2", OBJECT) as $key => $row) {
$latitude = $row->latitude;
$longitude = $row->longitude;
$info = $row->siteID;
echo $prependStr;
?>
{
position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
}
<?php
$prependStr =",";
}
?>
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
</script>
</body>
</html>
<?php
get_footer();
?>
If I'm reading your code right, you've got an array of features that looks like:
features = [
{position: new google.maps.LatLng(1, 2)},
{position: new google.maps.LatLng(3, 4)},
// etc...
];
i.e. the array contains objects with just a position property. So you correctly refer to that when you do:
position: feature.position,
However when you try and set your infowindow content using:
new google.maps.InfoWindow({
content: feature,
maxWidth: 300
})
That won't work, because the content property is meant to be a string, not a JS object. You need to specify some text there. If you're just wanting to display the coordinates, you could do:
new google.maps.InfoWindow({
content: feature.position.toString(),
maxWidth: 300
})
im a yiibie, and i want to use google maps in my project just like embedded google maps. For example i want that when an ngo(in my case) is registering there ngo they could give there address, type of map etc (just like in embedded google map) on the map so that people visiting that ngo page could easily locate that ngo and can get a route to that ngo, i have no idea of how and where using these google maps, please help me, thank you.
I don't know extension but you can easly create you map this way (in this sample there isn't the google maps key but if your app usage require this you should obtain one)
In Your <head> section add this
'<script src="https://maps.googleapis.com/maps/api/js?sensor=false&v=3&"></script>'
<style>
html, body, #map {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
In <body> add
<body>
<div id="map" ></div>
<script>
var yourLat = <?= $yourLat; ?>
var yourLng = <?= $yourLng; ?>
function init() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(yourLat , yourLng)
}
var mapElement = document.getElementById('map');
// Create the Google Map using out element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
var myLatLng = new google.maps.LatLng(yourLat, yourLng);
var yourMarker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
// Google Maps Scripts
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
</script>
......
</body>
I have codeigniter project which header, footer loading when calling the controller. So after header is loaded I want to add a google map to get latitude and longitude to textboxes when map been clicked. Currently I can do this outside of codeigniter. But I can't do this inside of CI after header loaded. I think its because google use window load function to initialize map.
<head>
<!-- Some js files loaded here when controller construct -->
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(40.713956,-74.006653);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
draggable: true,
position: myLatlng,
map: map,
title: "Your location"
});
google.maps.event.addListener(map,'click',function(event) {
document.getElementById("latbox").value = event.latLng.lat();
document.getElementById("lngbox").value = event.latLng.lng();
})
google.maps.event.addListener(marker, 'click', function (event) {
document.getElementById("latbox").value = this.getPosition().lat();
document.getElementById("lngbox").value = this.getPosition().lng();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas" style="width:50%; height:50%"></div>
If You're using jQuery, try something like
$(document).ready(function(){
// here paste google maps code
});
Map will initialize when DOM is ready
I was wondering if anyone has any ideas/tutorials on how to plot various points on a google map, and save the points in a database with custom marker titles.
I want something similar to http://www.mapmyrun.com/create_new , where i can actually draw on a map and mark out paths and such.
Plotting the points is done in Javascript, I managed to learn everything I needed from the maps API docs:
http://code.google.com/apis/maps/documentation/javascript/basics.html
I scraped the code below off a site I made which moves a single point to where the mouse is clicked. You should be able to store a set of points in a JS array, or better, get them from the map when submitting your form then update a hidden form field with the values which can be inserted in your database with a php/python script on the server.
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:400px; height:600px; display:block; float:left">
</div>
</body>
</html>
<script type="text/javascript">
var map;
var marker = null;
function initialize() {
var myLatlng = new google.maps.LatLng(54, -2.0);
var myOptions = {
zoom: 6,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
if(marker == null){
marker = new google.maps.Marker({
position: location,
map: map
});
}else{
marker.setPosition(location);
}
map.setCenter(location);
}
</script>
Edit:
Here is a demo from docs site, which creates a list of points and draws a lines between them:
http://code.google.com/apis/maps/documentation/javascript/examples/polyline-simple.html
There are other examples there too. Just load them and press ctrl+u in firefox to view the source.