How I use geopoint on frontend ?

Define / Create / Use Object-Classes, Fieldcollections, Object-Bricks, Variants, Inheritance, Custom Fields, ...

How I use geopoint on frontend ?

Postby kurt22 » Tue Mar 06, 2012 12:39 am

I have create a object in admin panel with geopoint. But now how I use my data for create the map on the frontend ? It's Ok if I use googlemap but I think is possible to use the same methode of the admin panel. So what is the method in the admin panel for look my marker on the googlemap ? Exemple code please :) ...and its strange, I work any api key ?!
kurt22
 
Posts: 55
Joined: Tue Jan 24, 2012 7:17 pm
Location: France

Re: How I use geopoint on frontend ?

Postby Thomas_K » Tue Mar 06, 2012 9:20 pm

There are many way's show the geopoint on frontend so pimcore just save the geopoint and you can use it for everything you want. Googlemap Version 3 work's without a api-key http://digg.com/news/story/Use_Google_M ... an_API_key.

Cheers Thomas
Thomas_K
 
Posts: 26
Joined: Tue Jul 26, 2011 1:34 pm

Re: How I use geopoint on frontend ?

Postby rayfx » Fri Mar 09, 2012 1:09 pm

Geo Locations are imho currently solved suboptimal in pimcore as lat and long are - in google terms - changed.
So you have to split and change them on your own!

here is a example with google map api 3 (NOT version 2!!!) which works vor me:

Code: Select all
<?php $geo   = explode("; ", $this->object->getMap()); ?>
<script src="http://maps.googleapis.com/maps/api/js?key=youtgooglekey&sensor=true" type="text/javascript"></script>
<script type="text/javascript">
   $(document).ready(function(){
      var myLatlng   = new google.maps.LatLng(<?php echo $geo[1]; ?>, <?php echo $geo[0]; ?>);

      var myOptions   = {
         center: myLatlng,
         zoom: 13,
         mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      var marker = new google.maps.Marker({
         position: myLatlng,
         title: "my marker"
      });
                      
      // To add the marker to the map, call setMap();
      marker.setMap(map);
   });
</script>

<div id="map_canvas" style="width: 640px; height: 400px"></div>


online: http://ermisch-gmbh.rayfx.net/wir_ueber_uns/kontakt_687 (at the bottom of the page!)

Cheers,
Roland
User avatar
rayfx
 
Posts: 16
Joined: Tue Jan 24, 2012 12:09 pm
Location: Munich / Germany

Re: How I use geopoint on frontend ?

Postby paulg » Tue Mar 13, 2012 11:33 am

Spurred on by rayfx's reply I created the front end for some Event objects, I just added a venue name field and this works flawlessly using Gmaps v3 (auto streetview without flash, no key needed, optimized for mobile etc).

Code: Select all
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
   $(document).ready(function(){
      var myLatlng   = new google.maps.LatLng(
           <?php  echo $this->item->getGeopoint()->getLatitude(); ?>,
           <?php echo $this->item->getGeopoint()->getLongitude(); ?>);

      var myOptions   = {
         center: myLatlng,
         zoom: 13,
         mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      var marker = new google.maps.Marker({
         position: myLatlng,
         title: "<?php echo $this->item->getVenue(); ?>"
      });
     
      marker.setMap(map);
   });
</script>

<div id="map_canvas" style="width: 640px; height: 400px; border: 2px solid gray;"></div>


The minor diffs are:
Using getLatitude() getLongitude() -- without having to explode() the string.
Drop ref to key in the url for Gmaps.
Added venue name for marker.
Pimcore 1.4.2.
paulg
 
Posts: 17
Joined: Wed Jan 18, 2012 12:02 am
Location: France


Return to Objects

Who is online

Users browsing this forum: No registered users and 2 guests