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>
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.
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!
I just wondered if anyone knew of a simple script available that will do the following:
Show Google map location of a particular vendor by getting its name from URL. Like we see in various listing websites like Justdial, IndiaMart, Zomato and a lot more. More clearly if my URL is
www.example.com/list.php?city=Delhi
It will show Delhi on google map embed on my list.php web page.
Does anyone know if something like this already exists in PHP?
Thanks in advance.
This will help you.
Html Part.
<div id="map" style="width:100%; height:500px;"></div>
Javascript:
function initMap() {
var latitude = your latitude;
var longitude = Your longitude;
var myLatlng = {lat: parseFloat(latitude), lng: parseFloat(longitude)};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: myLatlng
});
var address = Address;
var infowindow = new google.maps.InfoWindow({
content: address
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click to zoom'
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});
}
And finally you have to include map library.
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=Google key&callback=initMap">
</script>
I'm sure this is a simple issue, but I just can't seem to find the answer. I am trying to simply put google map on a site using dynamic lat & long from php call.
When I have this code it works:
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var bryantPark = new google.maps.LatLng(37.869260, -122.254811);
var panoramaOptions = {
position: bryantPark,
pov: {
heading: 165,
pitch: 0
},
zoom: 1
};
var myPano = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'),
panoramaOptions);
myPano.setVisible(true);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
However, when I update it so that the LatLng is dynamic with php call like so:
<?php include("inc/conn.php"); ?>
....
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var bryantPark = new google.maps.LatLng(<?=$row["field_Latitude"]?>, <?=$row["field_Longitude"]?>);
var panoramaOptions = {
position: bryantPark,
pov: {
heading: 165,
pitch: 0
},
zoom: 1
};
var myPano = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'),
panoramaOptions);
myPano.setVisible(true);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
When I view the source, I see that the lat & long are populating, but there is just a gray box where the street view should be.
Any thoughts?
Thanks!
When you want to show a map when streetView is not available(let's assume that streetview is not available when there is no panorama within a radius 50 meters), create a map and request the streetViewService to check if there is a panorama available for the given location.
When it does, set the position of the panorama and show it, otherwise do nothing.
function initialize() {
//center of the map and position of the panorama (when available)
var center = new google.maps.LatLng(42.698776, -86.181015),
//first initialize the map
map = new google.maps.Map(
document.getElementById('map-canvas'),
{
zoom:21,
center:center,
mapTypeId:google.maps.MapTypeId.SATELLITE
}
),
svService = new google.maps.StreetViewService(),
panoramaOptions = {
pov: {
heading: 165,
pitch: 0
},
zoom: 1,
visible:true
};
//test whether a panorama is available
svService.getPanoramaByLocation(center, 50, function(data,status){
if(status==google.maps.StreetViewStatus.OK){
//panorama is available, show it
var sv=map.getStreetView();
sv.setPosition(center);
sv.setOptions(panoramaOptions);
}
});
}
Demo: http://jsfiddle.net/doktormolle/7noptz5x/
First of all I will use <?php echo $row[...]; ?> instead of <?= $row[...] ?> , just to be sure that code works also if you have short tags disabled.
Secondly, I'd put:
<?php
$row = array(
'field_Latitude' => 37.869260,
'field_Longitude' => -122.254811
);
?>
instead of your include call and check the results to verify if I have something wrong in the included file.
In any case you should inspect the resulting HTML and check what are the real arguments passed to LatLong instead of the expected ones.
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.