I need to extract the coordinates from the url and use it to center the map. The following is the code I use now. But when I use this code, the map doesn't load at all.
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(<?php $_GET['curlat']?> , <?php $_GET['curlng']?>),
zoom: 12,
mapTypeId: 'roadmap'
});
While if I pass the coordinates like the following, it's working perfect
center: new google.maps.LatLng(13.964711, 76.325325),
Evidently, the error is in the above line of code.
What am I doing wrong in extracting the url and passing the value?
Try to echo the output :
ap = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(<?php echo $_GET['curlat'] .",". $_GET['curlng'];?>),
zoom: 12,
mapTypeId: 'roadmap'
});
Maybe it'll work if you actually print the variable !
<?php echo $_GET['curlat']?>
Related
I have list of coordinates in my database, I want to show that list of property on Google map using API, like this:
red mark are my coordinates/places
how is it possible any idea.
It's very easy, just read data from database, send it to client in json format and plot it in mail
refer following link,
https://developers.google.com/maps/documentation/javascript/markers
sample data
[{'latitude':'59.327383','longitude':'18.06747','title':'test'}....]
following is sample code
var center = new google.maps.LatLng('center latitude','center longitude'); // set center location
var mapOptions = {
zoom: 4,
center: center
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
for(var m in points) {
var myLatlng = new google.maps.LatLng(points[m].latitude,points[m].longitude);
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:points[m].title
});
}
I've been using PHP simple HTML dom parser to parse some data from websites.
Say if there is a web page with a Google map on it and that map has marker on it indicated by a lat and long coordinate, is there a way of retrieving those coordinates from a JavaScript variable?
Here is an example of the JavaScript code I would like to get access to:
<script type="text/javascript">
function GMinitialize() {
var myLatlng = new google.maps.LatLng(11.11, -11.11);
var mapOptions = { zoom: 16, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({ position: myLatlng, map: map });
} ;
</script>
If it's always going to be exactly the same structure just with different coordinates, as you suggested in your comment above, you could pull the text of the <script> tag with PHP Simple HTML DOM, then parse out the coordinates passed to the LatLng contructor with a regex...perhaps something very simple like:
/var myLatlng = new google\.maps\.LatLng\((.*)\)/
I have a Google Map which display fine (Google Maps API v3 - see code below). The code was initially inserted into the main index.php like so:-
<script type="text/javascript">
code here....
</script>
This works fine as inline code, and I can also use within index.php to insert variables from my PHP code into the Google Maps API.
As the code is growing I wanted to separate out the Google Maps API javascript and pop it into an external file for tidyness.
My first thought was to insert the file like so:
<script type="text/javscript" src="code/googlemaps.php"></script>
Now this works as it stands, however as soon as I try to insert any PHP code it wont work. I'm not too sure of how the PHP server handles the requests, but I guess I want the js file to be handed to the PHP parser and the PHP code to be parsed and the js with the parsed php then passed back to the browser.
The code is triggered by
<body onload="initialize()">
within my main index.php (im new to javascript so please bear with me).
For completeness here is the js code im using:
function initialize() {
// Main Google Map view variables
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(<?php echo $selected_lat . "," . $selected_lon; ?>),
mapTypeId: google.maps.MapTypeId.ROADMAP,
noClear: true,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT
},
streetViewControl: false
};
// Display Google Map
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
//Display Select Airport Marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $selected_lat . "," . $selected_lon; ?>),
map: map,
title:"<?php echo $airport_name[$selected_airport]; ?> Airport Reference Point\na new line\nanother line"
});
// google.maps.Circle variables
var seRangeOptions = {
center: new google.maps.LatLng(<?php echo $selected_lat . "," . $selected_lon; ?>),
fillOpacity: 0.3,
fillColor: "blue",
map: map,
radius: <?php echo seradius; ?>,
strokeColor: "#000000",
strokeOpacity: 0.0,
strokeWeight: 0
};
// display Google Maps circle
serangecircle = new google.maps.Circle(seRangeOptions);
}
ok, problem solved. Here is what I did, feedback welcome, I'm still learning :) Following code put into JavaScript file:
<?php session_start(); ?>
<?php echo 'var lat = "'.json_encode($_SESSION['lat']).'";';?>
Still a bit fuzzy on the order this all gets executed. I'm assuming PHP parses the javascript file, inserts the PHP variables and then returns the file to the browser? Also, any utilities like Firebug will let me see how this works in practice.
I also popped in the following at the top of the js file which seems to tidy-up how the source code is displayed in the browser too:
<?php header('Content-type: text/javascript'); ?>
The issue might be this line:
title:"<?php echo $airport_name[$selected_airport]; ?> Airport Reference Point\na new line\nanother line"
JavaScript doen't accept newlines to directly to continue the string, you must use \n, if title:"<?php echo $airport_name[$selected_airport]; ?> Airport Reference Point\na new line\nanother line" is returning a multiline String then it will break the JavaScript code.
Try to use the str_replace() function to replace all new lines to \n, and also addslashes() so " will not break the JavaScript String too
title:"<?php echo str_replace("\n", '\n', str_replace("\r",'', addslashes($airport_name[$selected_airport]))); ?> Airport Reference Point\na new line\nanother line"
I have a kml file with polygon data that is too complex to load onto one googlemap as it contains thousands of latlng coordinates that just wont load all at once.
My question is, is it possible to load just one polygon when a map marker is clicked? I have a mysql database table that holds the latlngs for each marker and the table also has a column for polyCoords. I am looping through the data using php which displays all the markers correctly. Can i then add a listener to the markers which will load the data from the polyCoords column and just show the polygon for that clicked map marker?
<script type="text/javascript">
function initialize()
{
var centre = new google.maps.LatLng(34.233753,-83.828712);
var myOptions =
{
zoom: 4,
center: centre,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<?php while ($row = #mysql_fetch_assoc($result))
{?>
var myLatlng = new google.maps.LatLng(<?php echo $row['lat'] . ',' . $row['lng']?>);
var marker = new google.maps.Marker
(
{
position: myLatlng,
map: map
}
);
<?php }?>
}
</script>
Thanks
Yes. Investigate AJAX.
There are some articles in the Google docs which may help: https://developers.google.com/maps/documentation/javascript/articles
Have a look at Using PHP/MySQL with Google Maps and Creating a store locator with PHP & MySQL. The latter covers getting data out of a database and updating what's shown on the map (it's markers rather a polygon boundary, but the technique is very similar).
If you run into a specific coding difficulty, ask a question about that.
I'm using a google map api from this website , thanks to the author.
Here is part of the code:
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});
<?
$query = mysql_query("SELECT * FROM markers WHERE ID='1'");
while ($row = mysql_fetch_array($query)){
$name=$row['name'];
$lat=$row['lat'];
$lon=$row['lng'];
$desc=$row['address'];
echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc');\n");
}
?>
center = bounds.getCenter();
map.fitBounds(bounds);
However I'm facing a problem to adjust the zoom level , it set as 14, but no matter what value I changed , it remains the same.
I read from the comments below , someone suggest to remove this line :
map.fitBounds(bounds);
I removed it , but the center of map is move to other location , which I think is (0,0).
Is there any way to fix the zoom problem of this code? I tried to edit all the size though..but I'm not familiar with google map coding.
Thank you.
Replace this:
center = bounds.getCenter();
map.fitBounds(bounds);
with:
map.setCenter(bounds.getCenter());
bounds.getCenter() will return the calculated center of the bounds extended by addMarker()
It looks like you're setting a zoom level when you create the map, but then map.fitBounds() changes the zoom level to contain the bounds.
Try setting the zoom level after setting the viewport with fitBounds.
...
map.fitBounds(bounds);
map.setZoom(14);
Here you can pick where you want center the map:
center: new google.maps.LatLng(0, 0),
Ofc, put some other numbers in place of 0, 0 - these are Latitude and Longitude.
Then you wont need the fit bounds - delete it.
And zoom: 14 will work (and any other number). Its not working now, cuz its taking the bounds, and trying to fit all the area inside these bound, and use MAX zoom possible, to show whole area.
After map.fitBounds(bounds) statement add the following statement
map.setZoom(zoom:number)
This will set the zoomlevel to your desired zoom level.
Analyzing your code:
You are initializing the map with zoom level 14 and center (0,0).
Significance of map.fitBounds(bounds); command is it adjusts the bounds of the map to show all the added markers which in-turn will change the zoom level. If you remove this statement your center will remain as (0,0) and zoom level as 14. If you want to set the center of the map use the following statement
map.setCenter(latlng:LatLng)
Thanks
B.J.